JavaScript表格.doc

1、表格表格的层次结构表格标题表头 1表头 2表头 3脚注数据数据数据数据数据数据上面是一个创建表格所用到的所有标签，但一些标签是可写可不写的，事实上一般的表格只需写上 tr 与 td 标签就行了，而标题 caption,表头 thead 表尾 tbody 等则是一些语义性元素表格对象的一些属性var table= document.getElementById(“myTable“);/获取表格标题 caption 标签var caption = table.getElementsByTagName(“caption“)0;/HTML DOM 提供的更简单的方法caption= table.cap

2、tion;/返回表格标题 caption 标签，如果没有则返回 nullif (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 对象增加了一些集合来访问/获取所有 trvar rows = table.getEle

3、mentsByTagName(“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 标签，也会默认有一个

4、 tbody 表格对象的一些方法创建标题:createCaption() 方法用于在表格中获取或创建 元素。返回一个 HTMLElement 对象，表示该表的 元素。如果该表格已经有了标题，则返回它。如果该表没有 元素，则创建一个新的空 元素，把它插入表格，并返回它。var caption = document.createElement(“caption“);caption.appendChild(document.createTextNode(“新标题“);table.insertBefore(caption,table.firstChild);/*上面方法有两大缺点：1.方法复杂2.如果

5、已经存在 caption 标签，则会造成 caption 标签重复，导致后插入的无效*/caption = table.createCaption();/注意，并不需要指定要将其插入到哪个表格中/因为该方法必须在对应的表格对象上调用caption.innerHTML = “新标题“;与 createCaption 相似的还有： createTFoot() 在表格中创建一个空的 tFoot 元素;返回一个 TableSection，表示该表的tfoot 元素。如果该表格已经有了脚注，则返回它。如果该表没有脚注，则创建一个新的空 tfoot 元素，把它插入表格，并返回它。 createTHead(

6、) 在表格中创建一个空的 tHead 元素;返回一个 TableSection，表示该表的thead元素。如果该表格已经有了表头，则返回它。如果该表没有表头，则创建一个新的空thead元素，把它插入表格，并返回它。 既然有增加的方法，就有对应的删除的方法 deleteCaption() 从表格删除 caption 元素以及其内容。 如果该表有 caption 元素，则从文档树种删除它。否则，什么也不做。 deleteTFoot() 从表格删除 tFoot 元素及其内容。 如果该表有 tfoot 元素，则将它从文档树种删除，否则什么也不做。 deleteTHead() 方法用于从表格删除 the

7、ad 元素。如果该表有 thead元素，则将它从文档树种删除，否则什么也不做。 添加与删除行 insertRow() 在表格中插入一个新行。 返回一个 TableRow，表示新插入的行。该方法创建一个新的 TableRow 对象，表示一个新的tr标记，并把它插入表中的指定位置。新行将被插入 index 所在行之前。若 index 等于表中的行数，则新行将被附加到表的末尾。如果表是空的，则新行将被插入到一个新的tbody 段，该段自身会被插入表中。 deleteRow() 从表格删除一行。参数 index 指定了要删除的行在表中的位置。行的编码顺序就是他们在文档源代码中出现的顺序。thead和t

8、foot 中的行与表中其它行一起编码。 行 (TableRow) 对象行对象的一些属性：cells 属性返回行中所有单元格的一个数组。rowIndex 属性返回该行在表中的位置。sectionRowIndex 属性返回在 tBody 、tHead 或 tFoot 中，行的位置。 var row = table.rows0;alert(row.cells.length);/第一行中单元格的数目alert(row.rowIndex);/0TableRow 对象的方法 deleteCell() 删除行中的指定的单元格。参数 index 是要删除的表元在行中的位置。该方法将删除表行中指定位置的表元。

9、insertCell() 在一行中的指定位置插入一个空的 td 元素。 返回一个 TableCell 对象，表示新创建并被插入的 td 元素。 该方法将创建一个新的 td 元素，把它插入行中指定的位置。新单元格将被插入当前位于 index 指定位置的表元之前。如果 index 等于行中的单元格数，则新单元格被附加在行的末尾。请注意，该方法只能插入 td 数据表元。若需要给行添加头表元，必须用 Document.createElement() 方法和 Node.insertBefore() 方法（或相关的方法）创建并插入一个 th 元素。var row =table.rows2;var cell

10、 = row.insertCell(2);cell.innerHTML = “新插入的单元格“;/上面的代码与下面的等效(但不考虑空白文本节点)var cell = document.createElement(“td“);cell.innerHTML = “新插入的单元格“;row.insertBefore(cell,row.childNodes2);/删除单元格row.deleteCell(2);/等效代码 (同样不考虑空白文本节点)row.removeChild(row.childNodes2);TableCell 单元格对象与 TableCell 对象相关的有用的属性只有一个：cellIndex 属性返回单元在格行中的下标alert(table.rows2.cells3.cellIndex);/3