如果需要利用程式來增加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>

文章標籤
全站熱搜
創作者介紹
創作者 JoyceHsu1126 的頭像
JoyceHsu1126

Joyce Hsu 的部落格

JoyceHsu1126 發表在 痞客邦 留言(0) 人氣(2,506)