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>[email protected]</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); });
效果图:
相关推荐
momode 2020-09-11
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17