DOM基礎教程之使用DOM控製表格

作者：Eve Cole 更新時間：2025-05-05 23:48:01

表格的css控制就先不說了，首先分享下表格常用的DOM

表格添加操作的方法常用的為insertRow()和insertCell()方法。

row是從零開始計算起的，例如：

複製代碼代碼如下:var oTr = document.getElementById("member").insertRow(2)

是指將新行添加到第二行。

複製代碼代碼如下:

var aText = new Array();

aText[0] = document.createTextNode("fresheggs");

aText[1] = document.createTextNode("W610");

aText[2] = document.createTextNode("Nov 5th");

aText[3] = document.createTextNode("Scorpio");

aText[4] = document.createTextNode("1038818");

for(var i=0;i<aText.length;i++){

var oTd = oTr.insertCell(i);

oTd.appendChild(aText[i]);

}

變量oTr即為表格插入新行，再利用insertCell為這行插入新的數據，利用createTextNode創建新的文本節點，在appendChild給oTd，oTd即為新的單元格。

1.插入一行（動態添加表格）

複製代碼代碼如下:

window.onload=function(){

var oTr = document.getElementById("member").insertRow(2); //插入一行

var aText = new Array();

aText[0] = document.createTextNode("fresheggs");

aText[1] = document.createTextNode("W610");

aText[2] = document.createTextNode("Nov 5th");

aText[3] = document.createTextNode("Scorpio");

aText[4] = document.createTextNode("1038818");

for(var i=0;i<aText.length;i++){

var oTd = oTr.insertCell(i);

oTd.appendChild(aText[i]);

}

</script>

<caption>Member List</caption>

<tr>

<th scope="col">Class</th>

<th scope="col">Birthday</th>

<th scope="col">Constellation</th>

<th scope="col">Mobile</th>

</tr>

<tr>

<td>isaac</td>

<td>Cancer</td>

</tr>

<tr>

<td>girlwing</td>

<td>Virgo</td>

</tr>

<tr>

<td>tastestory</td>

<td>Sagittarius</td>

</tr>

</table>

2.修改表格的內容

當表格建立後，可以直接使用HtmlDom對錶格進行操作，相比document.getElementById(),document.getElementsByTagName()操作更為方便。

oTable.rows[i].cell[j]

以上通過rows、cells兩個屬性輕鬆訪問到表格特定的內容第i行和第j列(都是從0開始計數)，獲得單元格對像後就可以使用innerHTML屬性修改翔宇的內容了。

例如修改4行5列的內容為good

則可以使用以下代碼

複製代碼代碼如下:

var oTable = document.getElementById("table1");

oTable.rows[4].cells[5].innerHTML = "good";

3.刪除表格內容

表格既然有添加、修改、就有刪除功能。

表格中刪除行使用deleteRow(i)方法，其中i為行號。

表格中刪除列使用tr的deleteCell(j)方法。

如下代碼表示刪除表格的第二行及原來表格第三行的第二列

複製代碼代碼如下: var oTable = document.getElementById("table1"); oTable.deleteRow[2]; oTable.rows[2].deleteCell[3];

如下代碼表示刪除表格的第二行及原來表格第三行的第二列考慮到動態刪除又不影響整體html框架，又或者表格內容很多的情況下，可以採用動態刪除添加的辦法

複製代碼代碼如下:

window.onload=function(){

var oTr = document.getElementById("member").insertRow(2); //插入一行

var aText = new Array();

aText[0] = document.createTextNode("fresheggs");

aText[1] = document.createTextNode("W610");

aText[2] = document.createTextNode("Nov 5th");

aText[3] = document.createTextNode("Scorpio");

aText[4] = document.createTextNode("1038818");

for(var i=0;i<aText.length;i++){

var oTd = oTr.insertCell(i);

oTd.appendChild(aText[i]);

}

</script>

<caption>Member List</caption>

<tr>

<th scope="col">Class</th>

<th scope="col">Birthday</th>

<th scope="col">Constellation</th>

<th scope="col">Mobile</th>

</tr>

<tr>

<td>isaac</td>

<td>Cancer</td>

</tr>

<tr>

<td>girlwing</td>

<td>Virgo</td>

</tr>

<tr>

<td>tastestory</td>

<td>Sagittarius</td>

</tr>

</table>

刪除列

複製代碼代碼如下:

function deleteColumn(oTable, iNum) {

//自定義刪除列函數，即每行刪除相應單元格

for (var i = 0; i < oTable.rows.length; i++)

oTable.rows[i].deleteCell(iNum);

}

window.onload = function() {

var oTable = document.getElementById("table1");

deleteColumn(oTable, 2);

}

對於刪除表格列而言，DOM中沒有直接可調用的方法，需要自己來寫deleteColumn()方法，該方法接受兩個參數，一個參數是表格對象，另外一個參數則是希望刪除的列號。編寫方法很簡單，利用deleteCell()方法,每一行都執行相應的刪除單元格的方法。