<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="https://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script language="javascript" type="text/javascript" src="../20120319/include/jquery.js"></script><script language="javascript" type="text/javascript" >$(document).ready(function (){ $("#submit").click(function (){ //先获取文本框的值 var $name=$("#name").val(); var $email=$("#email").val(); var $phone=$("#phone").val(); //创建tr、td并且把内容放入td中 var $tr=$("<tr><td>"+$name+"</td><td>"+$email+"</td><td>"+$phone+"</td><td><a href='/go.html?url=#' class='lj'>DELETE</a></td></tr>"); $tr.appendTo("#table"); //如果在函数内部进行删除，直接使用click即可 $(".lj").click(function (){ //$(this)获取的是点击的对象，点击的对象是a标签，a标签的上一级的上一级是tr $(this).parent().parent().remove(); }) }); /*//如果在外部进行删除 ，需要使用live进行删除 $(".lj").live("click",function (){ //删除 $(this).parent().parent().remove(); }); */ });</script></head><body><div style="background-color:#CCC; width:700px; height:500px; margin-left:300px;"> <form ><p align="center">添加用户：</p></td> 姓名:<input type="text" id="name" />email:<input type="text" id="email" />电话:<input type="text" id="phone" /><br /><br /> <p align="center"><input type="button" id="submit" value="提交" /></p> <br /><br /> </form> <hr color="#FFFFFF" /><br /> <table width="600" border="1" id="table" bordercolor="#FFFFFF" align="center"> <tr id="top"> <td>姓名</td> <td>email</td> <td>电话</td> <td>删除</td> </tr><br /> </table></div></body></html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
阅读背景：
jquery实现动态添加和删除表格
来源：互联网
分享到：
