2014年5月8日 星期四

Javascript 動態 新增(insertRow)、刪除(deleteRow) table 欄位

在 html 中動態新增 table 的欄位(row)


//num 取得table的現有欄位數+1(從0開始計算)
var num = document.getElementById("table").rows.length;
// Tr 的 .insertRow 就是在 table 欄位中新增一個 Row num 表示新增在最後一筆
var Tr = document.getElementById("table").insertRow(num);

// Td 的.insertCell 在 Tr中新增一個 td Tr.cells.length 在Tr中 Td最後欄位新增一個Td 
Td = Tr.insertCell(Tr.cells.length);

//Tr Td 中可以去更改它的屬性
.className = "className"
.rowSpan = 3;
.innerHTML = '<input type="text" class="form-control" name="textName" id="textName">';

//如果要刪除table 的 row 直接使用
document.getElementById("table").deleteRow(要刪的欄位(int));

如果此篇對您有幫助,您可以點選廣告給予最大的動力,感謝您的收看。