运行效果图如下：
完整代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>添加用户</title> <script type="text/javascript" src="https://www.jb51.net/jquery-1.4.2.min.js"></script> </head> <body> <center> <br><br> 添加用户:<br><br> 姓名: <input type="text" /> email: <input type="text" /> 电话: <input type="text" /><br><br> <button>提交</button> <br><br> <hr> <br><br> <table cellpadding="5" cellspacing=0> <tbody> <tr> <th>姓名</th> <th>email</th> <th>电话</th> <th> </th> </tr> <tr> <td>Tom</td> <td>tom@tom.com</td> <td>5000</td> <td><a href="deleteEmp?id=Tom">Delete</a></td> </tr> <tr> <td>Jerry</td> <td>jerry@sohu.com</td> <td>8000</td> <td><a href="deleteEmp?id=Jerry">Delete</a></td> </tr> </tbody> </table> </center> </body> <script> $(document).ready(function(){ $("#addUser").click(function(){ var name = $("#name").val(); var email = $("#email").val(); var tel = $("#tel").val(); var $tr = $("<tr>"+ "<td>"+name+"</td>"+ "<td>"+email+"</td>"+ "<td>"+tel+"</td>"+ "<td><a href='deleteEmp?id="+name+"'>删除</a></td>" +"</tr>"); var $table = $("#usertable"); $table.append($tr); $tr.children().children().click(function(){ //alert($(domEle).parent().parent().children(":first").text()); //方法1. // $(domEle).parent().parent().remove(); // return false; //方法2. return deleteTr($tr); }); //不能在这里 给每个<a> 加事件 ，每add一次就each一次，会重复弹出confirm // $("tr td a").each(function(index,domEle){ // $(domEle).click(function(){ // //alert($(domEle).parent().parent().children(":first").text()); // //方法1. //// $(domEle).parent().parent().remove(); //// return false; // //方法2. // return deleteTr($(domEle).parent().parent()); // }); // // }); }); function deleteTr(aObject) { var flag = window.confirm("您确定要删除"+aObject.children(":first").text()+"名称的值吗？"); // alert(flag); if(!flag){ return false; } else { aObject.remove(); return false; } return false; } }) </script> </html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》