028-86922220
建站资讯

网站建设资讯

为你提供网站建设行业资讯、网站优化知识、主机域名邮箱、网站开发常见问题等。

jquery实现table增删改

html代码



    
    增删改
    
    
    



    
    
        
        
        
        
    
                                                     选择                 员工姓名                 员工年龄                 员工职位                 编辑                 删除                                                            alex                 38                 ceshi                 编辑                 删除                                                            egon                 38                 kaifa                 编辑                 删除                                                            wupeiqi                 38                 kaifa                 编辑                 删除                                                            yuanhao                 38                 kaifa                 编辑                 删除                           
              
                                    员工姓名:
            员工年龄:
            员工职位:
            
                                                                  员工姓名:
            员工年龄:
            员工职位:
            
                                            
css代码
.btn{
    margin-top:20px;
    margin-left: 400px;
}

.tab table{
    line-height: 40px;
    margin-left: 400px;
    margin-top: 20px;
    background-color: wheat;
    text-align: center;
    width: 600px;
}

.tab table a{
    text-decoration: none;
}
.tab table a:hover{
    color:red;
}
.hide{
    display: none;
}
.shade{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: darkgray;
    opacity: 0.4;
}



.add_form{
    margin-left: 500px;
    margin-top: 100px;
    width: 460px;
    height: 300px;
    position: absolute;
}

.edit_form{
    margin-left: 500px;
    margin-top: 100px;
    width: 460px;
    height: 300px;
    position: absolute;
}

jquery代码
/**
 * Created by hyh on 2017/8/8.
 */
$(document).ready(function(){
   $(document).on('click','.one',function(){

       if($(this).val() == "添加"){
           $(".shade").removeClass("hide");
           $(".add_form").removeClass("hide");
           $(".edit_form").addClass("hide");
           $(".btn").addClass("hide");
           $(".tab").addClass("hide");
       }
       else if($(this).val() == "全选"){
            $(".checkbox").prop("checked",true);
       }
       else if($(this).val() == "反选"){
           $(".checkbox").each(function(){
               $(this).prop("checked", !$(this).prop("checked"));
           });
       }
       else{
           $(".checkbox").each(function(){
               $(this).prop("checked",false);
           });
       }
   });

   $(document).on('click','.edit',function(e){
       e.preventDefault();
       var inx = $(this).parent().parent().index();
       // alert(inx);
       var empname=$(this).parent().parent().children().eq(1).text();
       var empage=$(this).parent().parent().children().eq(2).text();
       var emp_position=$(this).parent().parent().children().eq(3).text();
       $("#empname1").prop("value",empname);
       $("#empage1").prop("value",empage);
       $("#emp_position1").prop("value",emp_position);
       $(".btn").addClass("hide");
       $(".tab").addClass("hide");
       $(".add_form").addClass("hide");
       $(".shade").removeClass("hide");
       $(".edit_form").removeClass("hide");


       $("#save1").click(function(){
            // alert(inx);
           empname = $("#empname1").val();
           empage = $("#empage1").val();
           emp_position = $("#emp_position1").val();
           $("table").children().children().eq(inx).children().eq(1).text(empname);
           $("table").children().children().eq(inx).children().eq(2).text(empage);
           $("table").children().children().eq(inx).children().eq(3).text(emp_position);
           $(".btn").removeClass("hide");
           $(".tab").removeClass("hide");
           $(".shade").addClass("hide");
           $(".edit_form").addClass("hide");
           $(".add_form").addClass("hide");
       });
   });

   $("#save").click(function(){
               var empname = $("#empname").val();
               var empage = $("#empage").val();
               var emp_position = $("#emp_position").val();
               var htmlStr=''+
                ''+
                ''+empname+''+
                ''+empage+''+
                ''+emp_position+''+
                '编辑'+
                '删除'+
            '';
                $("#empname").val('');
                $("#empage").val('');
                $("#emp_position").val('');
               $("table").append(htmlStr);

               $(".btn").removeClass("hide");
               $(".tab").removeClass("hide");
               $(".add_form").addClass("hide");
               $(".edit_form").addClass("hide");
               $(".shade").addClass("hide");
   });

   $(document).on('click','.delete',function(e){
       e.preventDefault();
       var inx = $(this).parent().parent().index();
       // alert(inx);
       $(this).parent().parent().remove();
   });
});

分享文章:jquery实现table增删改
文章分享:http://whjierui.cn/article/pgppgo.html