Question

当尝试使用javascript在while循环中浏览表格的行和单元格时，我遇到了一个奇怪的问题。我在Win7上使用Firefox 3.5.7并启用了Firebug。

我有这个标记：

<table>
    <tbody>
        <tr id='firstRow'><td>a</td><td>b</td><td>c</td></tr>
        <tr><td>a</td><td>b</td><td>c</td></tr>
        <tr><td>a</td><td>b</td><td>c</td></tr>
    </tbody>
</table>

这个javascript：

var row = document.getElementById('firstRow');
console.log(row); // Row call 1
while (row) {
    console.log(row); // Row call 2
    row = row.nextSibling;
}

我遇到的问题是在线上注释了“Row call 1”，Firebug正在输出

<tr id='firstRow'>

正如所料。然而，在while循环中，Firebug给了我

<tr id='firstRow'>
<TextNode textContent="\n">

它为同一行提供了不同的输出，甚至在while循环开始执行后立即触及该行。对于后续行，它当然没有id ='firstRow'作为属性。

这给我的更大问题是，如果我在while循环中，并且我想使用row.cells [0]访问当前行的特定单元格，Firebug会给我一个错误。细胞未定义。

我想知道是否有人可以了解我遇到的这种情况。

Answer 1

Firefox正在将tr元素之间的空白作为附加节点。在执行任何操作之前，只需添加一个节点确实为tr的测试：

var row = document.getElementById('firstRow');
console.log(row); // Row call 1
while (row) {
    if(row.nodeName == "TR"){
       console.log(row); // Row call 2 
    }
    row = row.nextSibling;
}

请注意，文本节点的nodeName为#text，而nodeName将始终返回所有大写字母中的元素名称，无论您在文档中的方式如何。

Answer 2

TextNode是正确的，因为你在</tr>之后确实有。

一个简单的解决方法是跳过这些文本节点 - 通过计数或测试

row.tagName == 'TR'

Answer 3

使用tbody.rows集合。这更简单：

var row = document.getElementById('firstRow');
console.log(row); // Row call 1
var tbody = row.parentNode;
var rows = tbody.rows;
for (var i=row.rowIndex+1; i<rows.length; i++) {
 row = rows[i];
 console.log(row); // Row call 2, 3 ...
}

有关详细信息，请参阅http://msdn.microsoft.com/en-us/library/ms537484%28VS.85%29.aspx （或只是google rowIndex）

编辑：如果该表还包含thead和/或tfoot，那么使用row.sectionRowIndex

可能更合适

Firefox的奇怪DOM问题

3 个答案: