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

2019-11-19 18:04:14

字体：大中小

来源：转载

供稿：网友

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>aaa@qq.com</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);});

效果图：