Jquery实现表格元素的动态创建功能

Jquery实现表格元素的动态创建，本质是通过构造一个Dom Node节点，并且拼接到表格的Dom树上的子叶位置

HTML正文：

用户：<input type="text" id="user"/>邮箱：<input type="text" id="mail"/>手机：<input type="text" id="phone"/><br><button id="b1">添加</button><br><table border=1 id="table"><tr><td>user</td><td>mail</td><td>phone</td><td>operation</td></tr><tr><td>zhangsan</td><td>[e-mail]</td><td>25652463</td><td><a href="##">delete</a></td></tr></table>

Javascript处理代码：

$("#b1").click(function(){var $user=$("#user");var $mail=$("#mail");var $phone=$("#phone");//组装对象$tr=$("<tr></tr>");$td1=$("<td></td>");$td1.text($user.val());$td2=$("<td></td>");$td2.text($mail.val());$td3=$("<td></td>");$td3.text($phone.val());$td4=$("<td></td>");$href=$("<a></a>");$href.attr("href","##");$href.text("delete");$td4.append($href);$href.click(function(){if(window.confirm("确定删除？")){  //这里使用this表示当前事件绑定对象---？ $(this)不能用$(href)代替，否则会认为每次都是最新对象，原有对象的行为不能保存  $(this).parent().parent().remove();  }else{   return;}});$("#table").append($tr);    $tr.append($td1);    $tr.append($td2);    $tr.append($td3);    $tr.append($td4);});