JavaScript表格.doc

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