JavaScript學習筆記（2） 使用DOM編寫瀏覽器相容的Table操作

想要動態的操作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）！