想要動態的操作Table就必須熟悉DOM，要實現瀏覽器相容就必須熟悉W3C標準及各個瀏覽器在表格操作上的特性。 Table是現今資料展示的不二選擇，DOM專門為Table添加了一些功能和方法，這有助於我們寫出更簡單、更有效率的程式。
註： 本文的程序在IE7和Firefox3下測試通過。
程式一：動態建立表格
1 /**
2 * 建立一個特定行、列的表格
3 * @param {Object} rowCount */
6 function createTable(rowCount,cellCount){
8 alert("您輸入的不是數字");
9 return;
10 } alert("請輸入一個大於0的數字");
12 14 var tableNode = document.createElement("table");
15 "tableNode");
17 tableNode.setAttribute("class","tableStyle");
18 ("border",1);
19
20 var newRow = tableNode.insertRow(0);
22 for(var j = 0; j 23 var newCell = newRow.insertCell(0); Cell.innerHTML = Number(i+1) + "×" + Number(j+1);
25 }26 document.body.appendChild(tableNode);
28 }
這個函數很簡單：14行利用document.createElement()方法創建了一個Table標籤，到這步我們還沒有遇見需要注意的地方，因為我們還沒有遇見大部分瀏覽器都支援該方法。 16-18行我們用setAttribute()方法為新建的table標籤加入屬性，這幾行程式碼雖然可以被IE和FF解析，但是《javaScript高階程式設計》一書卻指出：
IE在setAttribute()方法上有很大的問題，當你使用他時，變更並不會總是正確的反應出來，如果你打算支持IE，最好盡可能使用屬性。大師說的話總是有道理的，所以我們可以使用屬性代替方法，幸好FireFox也對屬性提供了支持，所以我們可以把程序修改如下：
1 "tableStyle";
3 tableNode.border = "1"; 唯一要注意的是，設定table的class時，請使用className。
21行使用的insertRow(),23行所使用的insertCell()都是DOM為Table提供的專用API，對應的方法還有deleteRow()和deleteCell()，當使用這兩個方法時，我們應該要高度注意：IE為兩個方法都提供了預設的參數-1，而FireFox卻沒有提供他們參數，所以如果沒有參數的話，在IE下可以正常運行，但在FireFox下卻不行。所以我們應該注意總是為這兩個方法提供參數。通俗點可以這樣解釋這兩個函數的參數意思：
0：將新建的行放在已存在行的上面-------總是設定最新的行索引（rowIndex）為0
-1：把新建的行放在已存在行的下面-------行索引遞增，從0開始
也可以手動設定該參數，但當設定的參數大於目前table的行索引+1時，程式會報錯誤。 insertCell()意思相近，不在重複！
程序二：在指定行的前後插入新行
1 /**
2 * 在指定的行索引前或後加入新行
3 * @param {Object} position 標識插入的位置的前後
5 */
6 function insertNewRow(position,indexOfcom ById("tableNode");
8 if(tableNode == null){
9 少於要操作的表格");
10 return ;
11 ow) && parseInt(indexOfRow) > 0){
13 //透過中索引找到指定的行
14 (indexOfRow - 1) 15 } else {
17 var tableRow = tableNode.rows[tableNode.rows.leng var tableRow = tableNode.rows[table, 1] ;
18 }
19 var newRow = tableRow.cloneNode(true);
21 //
23 tableRow.parentNode.insertBefore(newRow,tableRow); //使用新行程中
26
27 }
28 } else {
29 alert("請輸入大於0的數字");
30 }
32 } www.devdao.com
程式15行所使用的rows的意思是回傳包含表格中所有資料行的一個數組，對應的還有cells:包含表格中所有儲存格的一個陣列。既然是包含所有行的數組，我們自然可以利用數組索引得到我們想要的值，
20行使用的cloneNode()方法是我最喜歡的DOM方法之一，他可以讓我們針對某個特定的HTML元素進行深（參數為true）、淺（參數為false）拷貝，所謂深拷貝的意思是,傳回一個當前元素的副本，該副本具有和原有元素相同的特稱。當我們需要新建一個和某個已存在元素相同的元素時，（例如多檔案上傳）這個方法可以幫我們省去很多程式碼。所謂淺拷貝就是只拷貝元素骨架而不拷貝元素特稱，意思不好表達，可以把上面程式cloneNode（）方法的參數設為false以便觀察其效果。
23行使用的insertBefore（）方法的使用也很簡單：在當前元素的前面插入指定的元素，經常看見網上有人說為什麼W3C不弄個insertAfter(),其實，我們只需換個方式思考一下，我們在在目前元素的下一個元素前面插入指定的元素，那不就實作了insertAfter()方法，嘿嘿！
程序3：刪除指定的行
1 /**
2 * 刪除指定的行程
3 * @param {Object} deleteRowIndex */
5 var tableNode = document.getElementById("tableNode");
7 var rowCount = tableNode.rows .length;
8
9 中一點(isNaN(deleteRowIndex)( Count)){
10 alert("請輸入大於0小於"+Number(rowCount )+"數字")
11 return;
12 RowIndex - 1));
14 } 呵呵，以這段小程式沒什麼好說的，主要使用的方法是deleteRow()，但注意：傳入的參數不能大於table的行數，否則會報錯！
程序4：刪除指定的儲存格
1 /**
2 * 移除指定的儲存格
3 * @param {Object}} */
6 var tableNode = document.getElementById("tableNode");
8 var rowNode = tableNode.rows[Number(indexOfRow - 1)];
9 rowNode.deleteCell(Number(indexOfCell-1))) 10 ）方法，接下來刪除指定列的程式碼，跟這個類似，無非就是循環table的每一行，找到指定的列，然後刪除。
以上就是JavaScript學習筆記（2） 使用DOM編寫瀏覽器相容的Table操作的內容，更多相關內容請關注PHP中文網（www.php.cn）！
