jQuery渲染表格（实现增删，全选，反选...）

Posted 2020-11-04 陪伴者

        因为最近都在学jQuery，所以这几天做的都是jQuery案例，这次做了一个表格类的，功能做的涵盖比较多，增删，全选，反选，批删等，

       给大家先看一下是什么样子的。

           

 

 

        现在开始实现它吧

      一：首先你要先写一下他的json数据，这样才能在渲染数据

              

{
  "personInfos" : [
    {
      "address" : "黑龙江",
      "persons" : [
        {
          "age" : 27,
          "name" : "孙三峰",
          "sex" : "男"
        },
        {
          "age" : 23,
          "name" : "刘壮壮",
          "sex" : "男"
        },
        {
          "age" : 18,
          "name" : "王大旭",
          "sex" : "男"
        }
      ]
    },
    {
      "address" : "北京",
      "persons" : [
        {
          "age" : 18,
          "name" : "王思聪",
          "sex" : "男"
        },
        {
          "age" : 33,
          "name" : "郭德纲",
          "sex" : "男"
        },
        {
          "age" : 18,
          "name" : "王大锤",
          "sex" : "男"
        }
      ]
    },
    {
      "address" : "河北",
      "persons" : [
        {
          "age" : 33,
          "name" : "王宝强",
          "sex" : "男"
        }
      ]
    }
  ]
}

 

    二：html布局

          

<div class="chose" id="checkBoxList">
        <table id="tb" border="1" cellspacing="0" cellpadding="1">
           <thead id="hide_tbody">
                 <th>年龄</th>
                 <th>姓名</th>
                 <th>性别</th>
                 <th>家乡</th>
                 <th>操作</th>
                 <th>选择</th>
           </thead>
           <tbody id="tbody">
               
           </tbody>
        </table>
        <div class="button">
            <button id="check_all">全选</button>
            <button id="cancel">取消全选</button>
            <button id="back">反选</button>
            <button id="checkdelete">选择删除</button>
        </div>
           
    </div>

 

  三：  jq代码（记得引入jq文件）

         

 $.ajax({
            url:"js/jqjson.json", //引入地址
            type:"GET",           //请求方式
            async:false,          //异步还是同步
            cache:false,          //是否有缓存
            success:function(data){
               // console.log(data); //打印是否有数据
               var html="";
               for(var i=0;i<data.personInfos.length;i++){      
                 for(var j=0;j<data.personInfos[i].persons.length;j++){
                     // console.log(persons.name.length);
                    html+=
                      ` 
                      <tr>
                         <td>${data.personInfos[i].persons[j].age}</td>
                         <td>${data.personInfos[i].persons[j].name}</td>
                         <td>${data.personInfos[i].persons[j].sex}</td>
                         <td>${data.personInfos[i].address}</td>
                         <td>
                            <button class="add">新增</button>
                            <button class="delete">删除</button>
                         </td>
                         <td>
                            <input type="checkbox" name="check" >
                         </td>
                      </tr>
                      `;
                 }  
               }

               $(\'#tbody\').html(html);
            }
  })

   

 $(function() {
                 //增加
                 $(".add").click(function(){  
                     // alert(1);
                  //找它的父级的父级克隆然后追加
                              var adda=$(this).parent().parent().clone(true);
                              $("#tb").append(adda);
                      });  
                //删除
                 $(".delete").click(function(){ 
                       // alert(1);
                     //找它的父级的父级克隆然后移除
                            $(this).parent().parent().remove()
                         }); 
                  //全选
                $("#check_all").click(function(){  
                    $("#checkBoxList :checkbox").attr("checked", true);  
                });  
                //取消全选
                $("#cancel").click(function(){  
                    $("#checkBoxList :checkbox").attr("checked", false);  
                });  
                //反选
                  $("#back").click(function(){
                       $(\'input\').each(function(){
                                      $(this).prop("checked",!$(this).prop("checked"));
                               })
                  })
                 //批删
                          $("#checkdelete").click(function(){ 
                                  // alert(1);
                                  $(\'input\').each(function(){
                                      if($(this).prop("checked")){
                                          $(this).parent().parent().remove()
                                      }
                                  })    
                    })

            });

                               

                                                                                                                                                                                                  -- --END