jquery实现table增删改-成都快上网建站

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增删改
当前URL:http://kswjz.com/article/pgppgo.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

其他资讯