Table注意事项

首先是一段 HTML 代码:

1
2
3
4
5
6
<table id="tb">    
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
    <tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>           
    <tr><td>13</td><td>14</td><td>15</td><td>16</td></tr>
</table>

DOM解析

对于一段 table 的 HTML 代码,即使没有显式写出 tbody 结构,浏览器在解析的时候都会加上 tbody 结构。所以,对于以上代码,若想获取第一行,需要使用代码:

1
2
document.getElementById('tb').lastChild.firstChild; //第一行
//document.getelementById('tb').lastChild 得到的不是最后一行而是 tbody

firstChild 和 lastChild

除了IE,Firefox,Opera 和 Chrome 对 table 中的换行处理都有着令我困惑的处理。对于以上代码,table 的 firstChild 和 tbody 的 lastChild 得到的都是 text 而不是所以为的 tbody 和 tr;而各自的 children.length 依然是代码明面的子代个数,并没有包括解析得到的 text。

1
2
3
4
document.getElementById('tb').children.length; // output 1
document.getElementById('tb').firstChild.nodeName; // output '#text' but not 'tbody'
document.getElementById('tb').lastChild.children.length; // output 4
document.getElementById('tb').lastChild.lastChild.nodeName; // output '#text' but not 'tr'

相比之下,IE 对 table 中换行的处理是忽略,所以倒没有这个困惑。不知道处于什么考虑,Firefox 等浏览器都这样来处理。

一个小小的测试页面

《Table注意事项》有15个想法

    1. @Code之行人, 很久没写过东西了,记录一下也好 :mrgreen:

    1. @猪猪懒人窝, 用作布局的话的确不好,不过作为数据载体还是很有用的

  1. 我不懂css,所以用DW做简单的网页都是用table的。不过我不会写代码。

评论已关闭。