- A+
所属分类：Web前端
最近在学习jQuery的时候，学习到了appendTo()和remove()函数
于是利用两者做了一个模拟动态添加和删除行数据的案例，以下为完整代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用appendTo和remove实现动态添加和删除行数据</title> <style type="text/css"> #employeeTable { /*设置表格的边框间距*/ border-spacing: 1px; /*设置边框元素的背景色*/ background-color: black; /*设置元素的外边距属性，顺序为顺时针：上右下左*/ margin: 80px auto 10px auto; } th, td { background-color: #ffffff; } #formDiv { width: 250px; border-style: solid; border-width: 1px; margin: 50px auto 10px auto; /*设置元素的填充属性，顺序为顺时针：上右下左*/ padding: 10px; } #formDiv input { width: 100%; } .word { width: 40px; } .inp { width: 200px; } </style> <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> $(function () { // 用于复用的删除数据的函数 var deleteFun = function () { // 在事件响应的function函数中，有一个this对象，这个this对象是当前正在响应事件的DOM对象 // 通过当前点击的对象a标签获取到Table表格的tr行元素 var $trElement = $(this).parent().parent(); // 通过tr行标签找到后代第一列td标签的值 var name = $trElement.find("td:first").html(); if (confirm("确定删除[" + name + "]吗")) { $trElement.remove(); } } // 添加新员工功能 $("#addEmpButton").click(function () { var empname = $("#empName").val(); var email = $("#email").val(); var salary = $("#salary").val(); var trObj = $(" <tr>n" + " <td>" + empname + "</td>n" + " <td>" + email + "</td>n" + " <td>" + salary + "</td>n" + " <td><a href="#">Delete</a></td>n" + " </tr>"); // 将以上内容追加到表格中 trObj.appendTo("#employeeTable") // 删除新添加的数据的功能（点击提交按钮后执行） // deleteFun函数后不能加括号()，否则页面加载完直接执行该函数，导致点击删除按钮没有任何反应 trObj.find("a").click(deleteFun); }); // 删除现有员工功能 // deleteFun函数后不能加括号()，否则页面加载完直接执行该函数，导致点击删除按钮没有任何反应 $("a").click(deleteFun); }); </script> </head> <body> <table id="employeeTable"> <tr> <th>Name</th> <th>Email</th> <th>Salary</th> <th> </th> </tr> <tr> <td>Tom</td> <td>tom@tom.com</td> <td>5000</td> <td><a href="#">Delete</a></td> </tr> <tr> <td>Jerry</td> <td>jerry@sohu.com</td> <td>8000</td> <td><a href="#">Delete</a></td> </tr> <tr> <td>Bob</td> <td>bob@bob.com</td> <td>10000</td> <td><a href="#">Delete</a></td> </tr> </table> <div id="formDiv"> <h4>添加新员工</h4> <table> <tr> <td class="word">name:</td> <td class="inp"> <input type="text" name="empName" id="empName"/> </td> </tr> <tr> <td class="word">email:</td> <td class="inp"> <input type="text" name="email" id="email"/> </td> </tr> <tr> <td class="word">salary:</td> <td class="inp"> <input type="text" name="salary" id="salary"/> </td> </tr> <tr> <td colspan="2" align="center"> <button id="addEmpButton" value="abc"> Submit </button> </td> </tr> </table> </div> </body> </html> 代码运行效果：
