jquery实现全选、反选效果及动态地添加和删除数据
01.html代码：
<div class="box"><div class="wrap"><button id="addBtn">添加单行信息</button><!-- 表格主体 --><table border="1px solid #ccc"><thead><th><input type="checkbox" name="" id="j_selectAll"></th><th>人物</th><th>介绍</th><th>产品</th><th>操作</th></thead><tbody><tr><td><input type="checkbox" name="" id=""></td><td>史蒂夫·保罗·乔布斯</td><td>苹果公司CEO</td><td>Apple系列</td><td class="removeBtn">删除</td></tr><tr><td><input type="checkbox" name="" id=""></td><td>丹尼斯·里奇</td><td>C语言之父</td><td>c语言</td><td class="removeBtn">删除</td></tr><tr><td><input type="checkbox" name="" id=""></td><td>比尔·盖茨</td><td>微软CEO</td><td>Windows系统</td><td class="removeBtn">删除</td></tr><tr><td><input type="checkbox" name="" id=""></td><td>马云</td><td>阿里CEO</td><td>网络交易平台</td><td class="removeBtn">删除</td></tr></tbody></table><button class="delateAllBtn">删除所选</button></div><!-- 遮罩层 --><div class="markLayer"></div><!-- 添加数据的表单 --><div class="addPanel"><h5 class="addPelTitle"><span>添加数据</span> <span id="closeBtn">x</span></h5><form action="" id="form1">姓名：<input type="text" placeholder="请输入人物姓名"><br>介绍：<input type="text" placeholder="请输入人物介绍"><br>产品：<input type="text" placeholder="请输入人物产品"></form><button id="addPelBtn">添加</button></div></div>
02.css样式：
* {margin: 0;padding: 0ex;}.box {width: 100%;height: 100%;}.wrap {position: relative;width: 500px;margin: 20px auto;text-align: center;}table {margin-top: 40px;}table td {padding: 5px 10px;font-size: 18px;}#addBtn {margin-bottom: 10px;padding: 5px;color: #B0C4DE;position: absolute;top: -35px;right: 36px;}.removeBtn {cursor: pointer;color: red;}.delateAllBtn {margin: 20px 0;width: 100px;height: 40px;}/* 遮罩层 */.markLayer {display: none;position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-color: #666666;opacity: 0.6;z-index: 3;}.addPanel {display: none;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 370px;text-align: center;border: 1px solid #ccc;/* margin: auto auto; */background-color: #fff;z-index: 9999;}.addPanel .addPelTitle {position: relative;background-color: #f7f7f7;color: #727073;font: 15px/32px "微软雅黑";text-align: left;margin: 0;padding-left: 10px;}.addPelTitle #closeBtn {position: absolute;right: 14px;text-align: right;cursor: pointer;font-size: 20px;}#form1 {margin: 15px 0 0 18px;font: 15px/30px "微软雅黑";color: #353331;}#form1 input {width: 260px;height: 30px;border: 1px solid #c7c5c4;margin-bottom: 30px;}#addPelBtn {width: 146px;height: 25px;font: 12px/25px;margin-bottom: 17px;border: 1px solid #a8a9ac;}
03.js代码
<script src="../jquery-1.12.1.js"></script><script>//1.删除单行元素(on解决新追加的数据没有绑定事件问题)$('.removeBtn').click(function () {$(this).parent().detach();});// 2.点击添加信息，显示遮罩层和添加面板$('#addBtn').click(function () {$('.markLayer').show();$('.addPanel').show();});// 3.点击面板里的关闭按钮，隐藏面板和遮罩层$('#closeBtn').click(function () {$('.markLayer').hide();$('.addPanel').hide();});// 4.点击添加面板的添加按钮，会将输入的内容生成一个tr,并将其添加到tbody中,最后隐藏面板和遮罩层$('#addPelBtn').click(function () {// 4.1 获取用户输入的内容let name = $('#form1 input:eq(0)').val();let introduct = $('#form1 input:eq(1)').val();let product = $('#form1 input:eq(2)').val();// 4.2 生成新的一个trlet newData = $('<tr><td><input type="checkbox" name="" id=""></td><td>' + name + '</td><td>' +introduct + '</td><td>' + product +'</td><td class="removeBtn">删除</td></tr>');newData.find('.removeBtn').click(function () {$(this).parent().remove();})console.log(newData);// 4.3 将生成的tr加入到tbody中$("tbody").append(newData);// 4.4 隐藏面板和遮罩层$('.markLayer').hide();$('.addPanel').hide();})// 5.全选功能的实现// 5.1 tbody所有input框的checked值跟随全选框变化$('#j_selectAll').click(function () {// 获取全选框的状态let j_selAllVal = $(this).prop('checked');$('tbody input').prop('checked', j_selAllVal);})// 5.2 下面单选框全部选中时，上面的全选框被选中，否则不选中$('tbody input').click(function () {let curCheckNum = $('tbody input:checked').length;let totalNum = $('tbody input').length;// if (curCheckNum == totalNum) {//$('#j_selectAll').prop('checked', true);// } else $('#j_selectAll').prop('checked', false);// 简化if后：$('#j_selectAll').prop('checked', curCheckNum == totalNum);})// 6.点击“删除所选”按钮，删除选择部分的tbody 单元格$('.delateAllBtn').click(function () {$('tbody input:checked').parent().parent().remove();})</script>
