添加表格及删除内容的js代码,如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>添加表格 删除内容-www.jb200.com</title> <script language="javascript" type="text/javascript" src="../jquery/jquery-1.7.1.min.js"></script> </head> <script language="javascript" type="text/javascript" > //使用jquery加载事件 $(document).ready(function(){ //追加tr var $i=1; $("#btn1").click(function(){ $i++; var $tr=$("<tr id='tr"+$i+"'><tr>"); $tr.appendTo("#table"); $("input[type=text]").each(function(index,domEle){ //alert(this.value); //dom //alert($(this).val()); //jquery //用jquery创建一个节点 var $td=$("<td>"+$(this).val()+"</td>"); //将创建的文本节点追加到#table中 $td.appendTo("#tr"+$i); }); var $td2=$("<td> <a href='#' id='"+$i+"'>Delete</a></td>"); $td2.appendTo("#tr"+$i); //删除tr $("a").click(function(){ //获取a 的id值 alert($(this).attr('id')); $("table tr").remove("#tr"+$(this).attr('id')); }); }); }); </script> 姓名: <input type="text" id="name" /><br /> E-mail:<input type="text" id="email" /> <input type="button" id="btn1" value="插入数据" /> <table id="table" width="475" border="1"> <tr> <td width="88">姓名</td> <td width="54">email</td> <td width="54"></td> </tr> <tr id="tr1"> <td>脚本学堂</td><td>test@jb200.com</td> <td ><a href="#" id="1">Delete</a></td></tr> </table> </body> </html>