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

{ ?"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" : "男" ???????} ?????] ???} ?]}

<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>

 $.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() ?????????????????????????????????????} ?????????????????????????????????}) ???????????????????????}) ???????????});