abstrakt：Jquery實(shí)現(xiàn)表格元素的動(dòng)態(tài)創(chuàng)建，本質(zhì)是通過(guò)構(gòu)造一個(gè)Dom Node節(jié)點(diǎn)，并且拼接到表格的Dom樹(shù)上的子葉位置。HTML正文：用戶：<input type="text" id="user"/> 郵箱：<input type="text" id="mail"/&

Jquery實(shí)現(xiàn)表格元素的動(dòng)態(tài)創(chuàng)建，本質(zhì)是通過(guò)構(gòu)造一個(gè)Dom Node節(jié)點(diǎn)，并且拼接到表格的Dom樹(shù)上的子葉位置。

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");
 
//組裝對(duì)象
$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)前事件綁定對(duì)象---？ $(this)不能用$(href)代替，否則會(huì)認(rèn)為每次都是最新對(duì)象，原有對(duì)象的行為不能保存
 $(this).parent().parent().remove(); 
}else{
 return;
}
});
 
$("#table").append($tr);
 $tr.append($td1);
 $tr.append($td2);
 $tr.append($td3);
 $tr.append($td4);
});

更多關(guān)于jQuery實(shí)現(xiàn)表格元素動(dòng)態(tài)創(chuàng)建功能請(qǐng)關(guān)注PHP中文網(wǎng)（ipnx.cn）其他文章！