jquery实现动态表格项目（表格增加删除/全选/表格变色特效）
一、用jquery实现动态表格相关功能
1、表格自动增加 当前行用户数据
2、表格自动删除 当前行数据
3、表格全选按钮
4、表格移动到当前行自动变色，自动变粗2px 的特性
项目效果视频
查看视频点击：https://blog.csdn.net/weixin_44385486/article/details/120925523?spm=1001.2014.3001.5501
jquery实现动态表格项目（表格增加删除/全选/表格变色特效）
二、项目具体实现代码
1、html基本实现（超详细注解）
（1）添加员工数据
<!--这个div是添加员工数据--> <div> 姓名：<input type="text" name="name" id="name"> 年龄：<input type="text" name="age" id="age"> 薪资：<input type="text" name="salary" id="salary"> 省份:<select onchange="test3()" id="province"> <option value="gz">贵州</option> <option value="hlj">黑龙江</option> <option value="gs">甘肃</option> </select> 城市：<select id="city"></select> <input type="submit" value="提交" onclick="input()"> </div>
添加员工示列图
（2）表格（员工展示初始化表格）
<div class="table"> <div id="div_h3"> <h3>员工动态数据表格</h3> </div> <table border="1px" cellpadding="0px" cellspacing="0px" width="75%" align="center"> <thead> <tr> <th> <input type="checkbox" id="selectAll">全选</th> <th>姓名</th> <th>年龄</th> <th>薪资</th> <th>城市</th> <th>操作</th> </tr> </thead> <tbody id="tbody"> <tr onmouseover="test1(this);" onmouseout="test2(this);"> <td><input type="checkbox"></td> <td>王恒杰</td> <td>21</td> <td>20000</td> <td>贵州遵义</td> <td><input type="button" onclick="remove(this)" value="删除"></td> </tr> <tr onmouseover="test1(this);" onmouseout="test2(this);"> <td><input type="checkbox"></td> <td>吴洪旭</td> <td>23</td> <td>28000</td> <td>黑龙江哈尔滨</td> <td><input type="button" onclick="remove(this)" value="删除"></td> </tr> <tr onmouseover="test1(this);" onmouseout="test2(this);"> <td><input type="checkbox"></td> <td>张西</td> <td>22</td> <td>18000</td> <td>甘肃兰州</td> <td><input type="button" onclick="remove(this)" value="删除"></td> </tr> <tr onmouseover="test1(this);" onmouseout="test2(this);"> <td><input type="checkbox"></td> <td>杨福君</td> <td>19</td> <td>4000</td> <td>贵州遵义</td> <td><input type="button" onclick="remove(this)" value="删除"></td> </tr> </tbody> </table> </div>
员工展示初始化表格
2、css样式（超详细注解）
css样式设置
1、body: 整个页面body的背景颜色样式 2、#div_h3：表格位置设置 3、#div_h3 h3 标题：“员工动态数据表格”的设置位置，颜色 4、th ：表头的设置 5、tr:行设置 6、d:列设置 7、.cc1：表格自动变色，字体变大设置
具体css设置
<style> body { background-color: #3e94ec; font-family: "Roboto", helvetica, arial, sans-serif; font-size: 16px; font-weight: 400; text-rendering: optimizeLegibility; } #div_h3 { display: block; margin: auto; max-width: 600px; padding: 5px; width: 100%; } #div_h3 h3 { color: red; font-size: 30px; font-weight: 400; font-style: normal; font-family: "Roboto", helvetica, arial, sans-serif; text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1); text-transform: uppercase; } th { color: #D5DDE5;; background: #1b1e24; border-bottom: 4px solid #9ea7af; border-right: 1px solid #343a45; font-size: 23px; font-weight: 100; padding: 24px; text-align: left; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); vertical-align: middle; } th:first-child { border-top-left-radius: 3px; } th:last-child { border-top-right-radius: 3px; border-right: none; } tr { background: #FFFFFF; font-size: 18px; } td { padding: 20px; text-align: left; vertical-align: middle; font-weight: 300; text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1); border-right: 1px solid #C1C3D1; } .cc1 { background: #4D4F66; font-size: 20px; } </style>
3、javaScript实现相关功能（超详细注解）
因为使用了jquery框架需要query文件，我使用的文件是（如果需要，源码和jquery文件都在文末）：
jquery-1.8.3.min.js
（1）用jquery实现页面变色
//1.用jquery实现页面变色 //鼠标移入 function test1(tr) { //4.事件发生后的监听功能，增加class属性 $(tr).addClass("cc1"); } //鼠标移出 function test2(tr) { //4.事件发生后的监听功能,移除class类属性 $(tr).removeClass("cc1"); }
(2)用jquery实现下拉列表二级联动
//2.用jquery实现下拉列表二级联动 //（1）准备城市数据 var city = { gz: ["贵阳", "遵义", "六盘水"], hlj: ["哈尔滨", "齐齐哈尔", "大庆"], gs: ["兰州", "庆阳", "天水"] } //（2）下拉列表二级联动的方法 function test3() { // //（1）每次选择前先去清空县区下拉列表的内容 var citySelect = $("#city") citySelect.text(""); // (2)获取省的值，jquery中用val var cityValue = $("#province").val(); // (3)获取市的值（两种方法） city.["gz"]; var citys = city[cityValue]; //(4)遍历市的信息for(inner in 市的值citys) for (index in citys) { //a、为市的值封装成文本节点 //b、创建option标签对象 // c、将文本节点追加到option中 var option = $("<option></option>"); option.append(citys[index]); // d、将option封装到select $(citySelect).append(option); } } //3.初始化方法，刷新页面时，自动选择第一个市信息 function init() { //初始化方法，刷新页面时，自动选择第一个市信息 test3(); }
(3)实现自动添加数据，自动删除数据，动态表单
//3.实现自动添加数据，自动删除数据，动态表单 function input() { //a.获取值 var name = $("#name").val(); var age = $("#age").val(); var salary = $("#salary").val(); var province = $("#province option:selected").text(); var city = $("#city option:selected").text(); //复选框 var inputCheckbox = $("<input/>"); //jquery中添加属性 inputCheckbox.attr("type", "checkbox"); //删除按钮 var inputButton = $("<input/>"); inputButton.attr("type", "button"); inputButton.attr("value", "删除") inputButton.attr("onclick", "remove(this)") //b.创建td标签，将值放入td中 var td0 = $("<td></td>"); var td1 = $("<td></td>"); var td2 = $("<td></td>"); var td3 = $("<td></td>"); var td4 = $("<td></td>"); var td5 = $("<td></td>"); td0.append(inputCheckbox) td1.append(name); td2.append(age); td3.append(salary); td4.append(province + city); td5.append(inputButton) //c.创建tr，将td放入tr var tr = $("<tr></tr>"); tr.append(td0) tr.append(td1); tr.append(td2); tr.append(td3); tr.append(td4); tr.append(td5); tr.attr("onmouseover", "test1(this)") tr.attr("onmouseout", "test2(this)") //d.将tr放到tbody $("#tbody").append(tr); } function remove(remove) { //删除语法 父节点.removeChild(子节点) //通过事件对象获取事件发生的源头 var tr = remove.parentNode.parentNode; var parentNode = tr.parentNode; parentNode.removeChild(tr); }
(4)全选实现
$(function () { //全选实现 $("#selectAll").click(function () { //:checked 获取当前选中的单选按钮或者复选框 $(":checkbox:gt(0)").prop("checked", $("#selectAll").prop("checked")); }) })
效果实现：
