Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

JavaScript对表格的操作

  我一提到表格时,很多人就会抛来鄙夷的目光。貌似表格已经成为某些人心中的凶神恶煞了,一看到有人使用表格就由衷地断定此人一定是新手。表格有自己独特的性质,有时候比其它任何元素都好用。而且表格还提供了一套操作接口,不用从DOM遍历就能操作它。
  我们使用表格经常就TABLE、TR、TD,这些,但是表格还有其它东西,比如CAPTION、THEAD、TBODY、TFOOT。把这些东西用好,表格绝对会带来非常大的价值。一个表格中,CAPTION、THEAD、TFOOT,都只能有一个,而TBODY可以有多个。CAPTION不能插入行,而THEAD、TFOOT、TBODY,都可以插入行。行是TR,行中还能插入TD单元格。另外还有TH单元格,但是这货没有提供插入接口,需要操作DOM树来插入。
  W3C标准HTMLTableElement元素的方法有下面这些。
    createCaption
    createTFoot
    createTHead
    deleteCaption
    deleteRow
    deleteTFoot
    deleteTHead
    insertRow
  这些方法看名字就能知道他们是什么用的,我就不描述了。除此之外,有些浏览器还提供一些非标准的方法比如,createTBody、deleteTBody,之类的。不过一般用不到,因为表格提供的接口也是有限的,比如insertRow这个方法就很弱。这个方法是插入行吧?但是插入到哪里呢?直接在表格上调用insertRow,行是插入哪里呢?我们平时使用表格只是省略了TBODY而已,实际上行一般是在TBODY中的,但是THEAD和TFOOT也可以插入行,而且TBODY可以是复数的。所以对于复杂的表格,在TABLE上直接调用insertRow显然是不符合科学发展观的,因为它总是找第一个能插入行的子元素来插入。这种情况就需要找到表格内部相应的THEAD、TBODY、TFOOT来插入行,这些东西可以从表格的属性上找到。
    tHead
    tBodies
    tFoot
  因为TBODY的数量是复数的,所以属性中的body这个单词使用了复数形式的bodies,它是一个数组。找到这些元素就可以单独为它们插入行了。说到行,表格上还可以直接找到所有行。
    rows
  访问这个属性就可以得到所有行,它也是个数组,你也可以把它认为是TR元素的集合。找到TR元素后还可以插入单元格和获取TR中的所有单元格,和之前的方法类似。使用“insertCell”和“cells”来完成。这些方法和属性的命名规则都是很有规律,所以很容易记住。
  最后,insertRow和insertCell这个两个方法的参数是插入的位置,为n表示第n个元素之前插入,-1表示最后一个元素之后插入。有些浏览器中,这两个方法如果不传入参数就会跑出异常。所以他们的参数是必须的。至于返回值,所以create和insert成功后都会返回插入或创建的元素本身。所以我们可以使用方法链来操作,比如下面这个代码 <table id="t"></table>
<script>
t.createTHead().insertRow(-1).insertCell(-1).innerHTML="次碳酸钴";
</script>
  输出结果我就不截图了,这一大堆方法测试太麻烦了。如果有兴趣自己去测试。。
网名:
54.196.182.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^