操作表格的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元素对象数组，它的长度就是表格的行数
• createCaption()方法
• createTHead()方法
• createTFoot()方法
• insertRow()方法，在指定位置插入一行
• deleteRow()方，删除指定一行

   TableRow Element表示表格的一行，TableRow的常用属性和方法：

• cells属性，值为行中td元素的对象数组
• rowIndex属性，表格中的总行号
• sectionRowIndex属性，该行在表格的某段的具体行号(相对于thead，tfoot)
• insertCell()方法，插入一个td
• deleteCell()删除一个td

  TableCell Element表示表格的一个单元格，常见属性方法：

• cellIndex属性，单元格在该行的列号
  TableSection 表示表格的一部分(thead,tbody,tfoot)，常见属性方法与Table相同。
  
  运用这些常见的属性方法就能快速、简洁地操作表格的DOM。不过这仅仅是HTML DOM的一部分，也就是说这能在浏览器中用于进行html的文档结构树操作，解析xml文档就没有什么效果了。