# javascript快速入門16--表格 表格的層次結構 ``` <table border="1"> <caption>表格標題</caption> <thead> <tr> <th>表頭1</th> <th>表頭2</th> <th>表頭3</th> </tr> </thead> <tfoot> <tr> <td colspan="3">腳注</td> </tr> </tfoot> <tbody> <tr> <td>數據</td> <td>數據</td> <td>數據</td> </tr> </tbody> <tbody> <tr> <td>數據</td> <td>數據</td> <td>數據</td> </tr> </tbody> </table> ``` 上面是一個創建表格所用到的所有標簽，但一些標簽是可寫可不寫的，事實上一般的表格只需寫上tr與td標簽就行了，而標題caption,表頭thead表尾tbody等則是一些語義性元素 ### 表格對象的一些屬性 ``` var table= document.getElementById("myTable"); //獲取表格標題caption標簽 var caption = table.getElementsByTagName("caption")[0]; //HTML DOM提供的更簡單的方法 caption= table.caption;//返回表格標題caption標簽，如果沒有則返回null if (caption) { alert(caption.firstChild.nodeValue);//輸出標題文本 } var thead =table.tHead;//獲取表頭 var tfoot = table.tFoot;//獲取表尾 ``` 由于caption,thead,tfoot這些標簽一個表格中只能出現一次，所以HTML DOM提供了直接的屬性來訪問，而對于tr,td,th,tbody這些重復的標簽，HTML DOM則給Table對象增加了一些集合來訪問 ``` //獲取所有tr var rows = table.getElementsByTagName("tr");//但會獲取嵌套表格中的tr //rows集合只會包含表格的行，而不包含表格下面嵌套表格的行 rows = table.rows;//返回包含表格中所有行的一個數組 alert(rows[0].innerHTML); var tBodies = table.tBodies;//返回包含表格中所有tbody的一個數組 var cells =table.cells;//返回包含表格中所有單元格的一個數組 ``` **注意，對于Table對象的cells屬性，它將返回所有td,th標簽，而對于tBodies屬性，即使HTML 源代碼中沒有tbody標簽，也會默認有一個tbody** ### 表格對象的一些方法 創建標題:createCaption() 方法用于在表格中獲取或創建元素。返回一個 HTMLElement 對象，表示該表的元素。如果該表格已經有了標題，則返回它。如果該表沒有元素，則創建一個新的空元素，把它插入表格，并返回它。 ``` var caption = document.createElement("caption"); caption.appendChild(document.createTextNode("新標題")); table.insertBefore(caption,table.firstChild); /* 上面方法有兩大缺點： 1.方法復雜 2.如果已經存在caption標簽，則會造成caption標簽重復，導致后插入的無效 */ caption = table.createCaption();//注意，并不需要指定要將其插入到哪個表格中 //因為該方法必須在對應的表格對象上調用 caption.innerHTML = "新標題"; ``` 與createCaption相似的還有： * createTFoot() 在表格中創建一個空的 tFoot 元素;返回一個 TableSection，表示該表的〈tfoot〉 元素。如果該表格已經有了腳注，則返回它。如果該表沒有腳注，則創建一個新的空 〈tfoot〉 元素，把它插入表格，并返回它。 * createTHead() 在表格中創建一個空的 tHead 元素;返回一個 TableSection，表示該表的〈thead〉元素。如果該表格已經有了表頭，則返回它。如果該表沒有表頭，則創建一個新的空〈thead〉元素，把它插入表格，并返回它。 既然有增加的方法，就有對應的刪除的方法 * deleteCaption() 從表格刪除 caption 元素以及其內容。 如果該表有 〈caption〉 元素，則從文檔樹種刪除它。否則，什么也不做。 * deleteTFoot() 從表格刪除 tFoot 元素及其內容。 如果該表有 〈tfoot〉 元素，則將它從文檔樹種刪除，否則什么也不做。 * deleteTHead() 方法用于從表格刪除thead 元素。如果該表有 〈thead〉元素，則將它從文檔樹種刪除，否則什么也不做。 添加與刪除行 * insertRow() 在表格中插入一個新行。 返回一個 TableRow，表示新插入的行。該方法創建一個新的 TableRow 對象，表示一個新的〈tr〉標記，并把它插入表中的指定位置。新行將被插入 index 所在行之前。若 index 等于表中的行數，則新行將被附加到表的末尾。如果表是空的，則新行將被插入到一個新的〈tbody〉 段，該段自身會被插入表中。 * deleteRow() 從表格刪除一行。參數 index 指定了要刪除的行在表中的位置。行的編碼順序就是他們在文檔源代碼中出現的順序。〈thead〉和〈tfoot〉 中的行與表中其它行一起編碼。 ## 行 (TableRow) 對象 行對象的一些屬性：cells屬性返回行中所有單元格的一個數組。rowIndex屬性返回該行在表中的位置。sectionRowIndex屬性返回在 tBody 、tHead 或 tFoot 中，行的位置。 ``` var row = table.rows[0]; alert(row.cells.length);//第一行中單元格的數目 alert(row.rowIndex);//0 ``` TableRow 對象的方法 * deleteCell() 刪除行中的指定的單元格。參數 index 是要刪除的表元在行中的位置。該方法將刪除表行中指定位置的表元。 * insertCell() 在一行中的指定位置插入一個空的td元素。 返回一個 TableCell 對象，表示新創建并被插入的 td 元素。 該方法將創建一個新的 td 元素，把它插入行中指定的位置。新單元格將被插入當前位于 index 指定位置的表元之前。如果 index 等于行中的單元格數，則新單元格被附加在行的末尾。請注意，該方法只能插入 td 數據表元。若需要給行添加頭表元，必須用 Document.createElement() 方法和 Node.insertBefore() 方法（或相關的方法）創建并插入一個 th 元素。 ``` var row = table.rows[2]; var cell = row.insertCell(2); cell.innerHTML = "新插入的單元格"; //上面的代碼與下面的等效(但不考慮空白文本節點) var cell = document.createElement("td"); cell.innerHTML = "新插入的單元格"; row.insertBefore(cell,row.childNodes[2]); //刪除單元格 row.deleteCell(2); //等效代碼(同樣不考慮空白文本節點) row.removeChild(row.childNodes[2]); ``` ## TableCell 單元格對象 與TableCell對象相關的有用的屬性只有一個：cellIndex屬性返回單元在格行中的下標 ``` alert(table.rows[2].cells[3].cellIndex);//3 ```