Jquery實(shí)現(xiàn)表格元素的動態(tài)創(chuàng)建,本質(zhì)是通過構(gòu)造一個(gè)Dom Node節(jié)點(diǎn),并且拼接到表格的Dom樹上的子葉位置。
HTML正文:
用戶:<input type="text" id="user"/>郵箱:<input type="text" id="mail"/>手機(jī):<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表示當(dāng)前事件綁定對象---? $(this)不能用$(href)代替,否則會認(rèn)為每次都是最新對象,原有對象的行為不能保存 $(this).parent().parent().remove(); }else{ return;}});$("#table").append($tr); $tr.append($td1); $tr.append($td2); $tr.append($td3); $tr.append($td4);});效果圖:

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答