如果需要利用程式來增加Table內的tr、td等內容
<table id="myTable">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
JavaScript寫法:
增加:
<script>
function myFunction()
{
//取得table元件
var table = document.getElementById("myTable");
//取的目前有的td數量
var num = document.getElementById("myTable").rows.length;
//從最後一筆開始加入
var row = table.insertRow(num);
//因為有兩個欄位 所以新增兩筆
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
//最後將兩筆的資料寫入
cell1.innerHTML = "NEW CELL0";
cell2.innerHTML = "NEW CELL2";
}
</script>
刪除:
<script>
function remove_data() {
//先取得目前的row數
var num = document.getElementById("mytable").rows.length;
//防止把標題跟原本的第一個刪除XD
if(num >2)
{
//刪除最後一個
document.getElementById("mytable").deleteRow(-1);
}
}
</script>
