1、代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery的员工管理的案例</title> <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript"> $(function(){ //1. jQuery 对象调用 jQuery 提供的方法的返回值如果是一个对象的话 //那么这个对象一定是一个 jQuery 对象 //2. find() 方法: 查找子节点, 返回值为子节点对应的 jQuery 对象 //给<a>节点添加点击事件 $("#employeetable a").click(function() { return removeTr(this); }); //1.删除<tr>节点 function removeTr(aNode) { var $trNode = $(aNode).parent().parent(); var cont = $trNode.find("td:first").text(); cont = $.trim(cont); var flag = confirm("您确定要删除"+cont+"的信息吗?"); if(flag) { $trNode.remove(); } return false; } //2.添加<tr>节点 $("#addEmpButton").click(function() { $("<tr></tr>").append("<td>" + $("#name").val() + "</td>") .append("<td>" + $("#email").val() + "</td>") .append("<td>" + $("#salary").val() + "</td>") .append("<td><a href='deleteEmp?id=001'>Delete</a></td>") .appendTo("#employeetable tbody") .find("a") .click(function() { return removeTr(this); }); }); }) </script> </head> <body> <center> <br> <br> 添加新员工 <br> <br> name: <input type="text" name="name" id="name" /> email: <input type="text" name="email" id="email" /> salary: <input type="text" name="salary" id="salary" /> <br> <br> <button id="addEmpButton" value="abc">Submit</button> <br> <br> <hr> <br> <br> <table id="employeetable" border="1" cellpadding="5" cellspacing=0> <tbody> <tr> <th>Name</th> <th>Email</th> <th>Salary</th> <th> </th> </tr> <tr> <td>Tom</td> <td>[email protected]</td> <td>5000</td> <td><a href="deleteEmp?id=001">Delete</a></td> </tr> <tr> <td> Jerry </td> <td>[email protected]</td> <td>8000</td> <td><a href="deleteEmp?id=002">Delete</a></td> </tr> <tr> <td>Bob</td> <td>[email protected]</td> <td>10000</td> <td><a href="deleteEmp?id=003">Delete</a></td> </tr> </tbody> </table> </center> </body> </html>
2、原始界面
3、案例