操作表格的HTML DOM方法

都DOM了还表格干嘛,不过有的时候也没有办法,需求就那么说的。本以为会很繁琐的createElement('tr')然后再createElement('td')什么的,后来发现这方面自己知道的是少了点。HTML DOM对表格的操作有一套封装,不必那样一个一个的创建表格元素。

首先说这个表格的DOM,写HTML的时候都是table完了就tr、td了,但是在DOM中,table和tr之间还有一层tbody,相应的还有thead,tfoot。所以在table对象里直接insertChild行(tr)对象结果并没有出现表格多一行的结果。实际上要在tbody这层进行操作,才能如愿地插入行。

以上都比较繁琐了,运用HTML DOM中的一些特殊的方法可以简化这个过程。
在HTML DOM中,Table Element对象有以下几个常用的属性和方法:
rows属性,返回表格中的tr元素对象数组,它的长度就是表格的行数
[list]
[*]createCaption()方法
[*]createTHead()方法
[*]createTFoot()方法
[*]insertRow()方法,在指定位置插入一行
[*]deleteRow()方,删除指定一行
[/list]

TableRow Element表示表格的一行,TableRow的常用属性和方法:
[list]
[*]cells属性,值为行中td元素的对象数组
[*]rowIndex属性,表格中的总行号
[*]sectionRowIndex属性,该行在表格的某段的具体行号(相对于thead,tfoot)
[*]insertCell()方法,插入一个td
[*]deleteCell()删除一个td
[/list]

TableCell Element表示表格的一个单元格,常见属性方法:
[list]
[*]cellIndex属性,单元格在该行的列号
[/list]

TableSection 表示表格的一部分(thead,tbody,tfoot),常见属性方法与Table相同。

运用这些常见的属性方法就能快速、简洁地操作表格的DOM。不过这仅仅是HTML DOM的一部分,也就是说这能在浏览器中用于进行html的文档结构树操作,解析xml文档就没有什么效果了

你可能感兴趣的:(WEB)