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

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

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

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

複製程式碼 程式碼如下:

var oTr = document.getElementById("member").insertRow(2222 )

是指將新行加入第二行。

複製程式碼 程式碼如下:

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 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("11 月 5 日");
    aText[3] = document.createTextNode("天蠍座");
    aText[4] = document.createTextNode("1038818");
    for(var i=0;i         var oTd = oTr.insertCell(i);
        oTd.appendChild(aText[i]);
    }
}
腳本>

   
   
        名稱/第>
        類別
        生日
        星座
        行動裝置
   
   
       
       
       
       
       
   
   
       
       
       
       
       
   
   
       
       
       
       
       
   
表>

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 = "好";

3.刪除表格內容

表格既然有新增、修改、刪除功能。
表格中刪除行使用deleteRow(i)方法，其中i為行號。
表格中刪除欄位使用tr的deleteCell(j)方法。

以下程式碼表示刪除表格的第二行及原來表格第三行的第二列

複製程式碼程式碼如下：

var oTable = document.getElementById("table1"); [2]; oTable.rows[2].deleteCell[3];

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

複製程式碼 程式碼如下:

成員清單

艾薩克	W13	6月24日	癌症	1118159
girlwing	W210	9月16日	處女座	1307994
品味故事	W15	11 月 29 日	射手座	1095245

   
   
       
       
       
       
       
   
   
       
       
       
       
       
   
   
       
       
       
       
       
   
   
       
       
       
       
       
   

Member List

Name	Class	Birthday	Constellation	Mobile
isaac	W13	Jun 24th	Cancer	1118159
girlwing	W210	Sep 16th	Virgo	1307994
tastestory	W15	Nov 29th	Sagittarius	1095245

刪除欄位

複製程式碼 程式碼如下:

function deleteColumn(oTable, iNum) {
                //自訂刪除資料列函數，即每行刪除對應儲存格
                for (var i = 0; i                     oTable.rows[i].deleteCell(iNum);
            }
            window.onload = function() {
                var oTable = document.getElementById("table1");
                deleteColumn(oTable, 2);
            }

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