利用JS克隆表格

2012/11/11 19:39:03作者：佚名來源：網(wǎng)絡(luò)

移動端

【實例名稱】

利用JS克隆表格

【實例描述】

表格的行可以插人、刪除和修改，類似于c#中的DataTable對象。大多數(shù)的表格對象都支持克隆功能，本例就學(xué)習(xí)如何克隆HTML的table。

【實例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標(biāo)題頁-學(xué)無憂（www.denvermotorcycleaccidentlawyer.com）</title>
</head>
<body>
<input type=button value=克隆表格 name=mytxt onclick=add()>
<table border=1>
<tr id=r1 name=r1>
  <td>第一列</td><td>第二列</td>
</tr>
</table>
<script language=JavaScript>
i=1;
function add()
{
++i;                           
//用于表格id的自增長
var newTr= r1.cloneNode(true); 
//克隆指定的行
newTr.id="r"+i;                
//指定新行的id
newTr.name="r"+i;              
//指定新行的name
r1.parentNode.insertAdjacentElement("beforeEnd",newTr);  
//在當(dāng)前表格中插入行
}
</script>
</body>
</html>

【運行效果】

克隆表格運行效果

【難點剖析】

本例的重點有兩個，如何克隆行，如何將克隆的行添加到當(dāng)前表格。克隆行使用了行的“cloneNode”方法，其只有一個參數(shù)，指明被克隆的節(jié)點是否應(yīng)該包含所有的屬性及原始節(jié)點中的子節(jié)點。將克隆行添加到當(dāng)前表格的方法是“insertAdjacentElement”，其包含兩個參數(shù)，要插入的位置和要插入的行。

【源碼下載】

為了JS代碼的準(zhǔn)確性，請點擊：克隆表格進(jìn)行本實例源碼下載

標(biāo)簽： JS克隆表格