通过图片了解功能: body内的html代码: <body> <center> <br><br> 添加用户:<br><br> 姓名: <input type="text" name="name" id="name" /> email: <input type="text" name="email" id="email" /> 电话: <input type="text" name="tel" id="tel" /><br><br> <button id="addUser">提交</button> <br><br> <hr> <br><br> <table id="usertable" border="1" 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" mce_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" mce_href="deleteEmp?id=Jerry">Delete</a></td> </tr> </tbody> </table> </center> </body> JQuery代码: <script language="JavaScript"> //当DOM载入就可以查询及操作时绑定一个要执行的函数 $(document).ready(function(){ $("#addUser").click(function(){ var nameValue = $("#name").val(); var emailValue = $("#email").val(); var telValue = $("#tel").val(); //name var $tdName = $("<td/>"); $tdName.text(nameValue); //email var $tdEmail = $("<td/>"); $tdEmail.text(emailValue); //tel var $tdTel = $("<td/>"); $tdTel.text(telValue); //<a></a> var $aElement=$("<a></a>"); $aElement.attr("href","deleteEmp?id=" + nameValue); $aElement.text("delete"); //delete var $tdDelete = $("<td/>"); $tdDelete.append($aElement); //<tr></tr> var $trElement = $("<tr/>"); $trElement.append($tdName) .append($tdEmail) .append($tdTel) .append($tdDelete); //需要在tbody内部插入 方法一:简单但是有bug的方法,当有多个tbody的时候,就会出错 //$("tbody").append($trElement); 方法二: $("#usertable").children().eq(0).append($trElement); $aElement.click(function(){ //为什么这个时候用this不行?是因为this是DOM元素,不是JQuery对象 //return delA(this); 这个是错误的 return delA($aElement); }) }); }); function delA($a){ var name=$a.parent().parent().children().eq(0).text(); //alert(name); var flag=window.confirm("你确定要删除 "+ name +" 记录"); //不删除 if(!flag){ return false; } //删除 $a.parent().parent().children().remove(); //使链接失效 return false; }