本文實例講述了jQuery實現動態添加tr到table的方法。分享給大家供大家參考，具體如下：
運行效果圖如下：
完整代碼如下：
<!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="jquery-1.4.2.min.js"></script> </head> <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">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選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
