jQuery渲染表格(实现增删,全选,反选...)

Posted 陪伴者

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery渲染表格(实现增删,全选,反选...)相关的知识,希望对你有一定的参考价值。

        因为最近都在学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

以上是关于jQuery渲染表格(实现增删,全选,反选...)的主要内容,如果未能解决你的问题,请参考以下文章

使用Easyui ,表格表头的复选框怎么实现全选和取消全选的功能,

使用Easyui ,表格表头的复选框怎么实现全选和取消全选的功能,

利用jQuery实现CheckBox全选/全不选/反选

jQuery 实现全选多选反选

Layui table中筛选列增加 [全选,反选] 功能【转】

jQuery简单实现全选与反选