标签：++ border ESS 北京 -- body jquery delete 全选
因为最近都在学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
标签：++ border ESS 北京 -- body jquery delete 全选
原文地址：https://www.cnblogs.com/liujiajiablog/p/9026370.html
