html+table+dom+结构,操作表格的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文档就没有什么效果了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值