Firefox中的奇怪DOM問題

我在嘗試使用javascript在while循環中瀏覽表格行和單元格時遇到了一個奇怪的問題。我在Win7上使用Firefox 3.5.7並啓用了Firebug。Firefox中的奇怪DOM問題

我有這個標記：

<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; 
}

我遇到的問題是，上線評論說：「行調用1」，Firebug的輸出

<tr id='firstRow'>

如預期的那樣。然而，在while循環，螢火蟲是給我

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

這是給我的確切同一行不同的輸出，while循環開始執行，並沒有別的感動行甚至之後。對於後面的行，它當然沒有id ='firstRow'作爲屬性。

這給了我更大的問題是，如果我在while循環中，並且我想使用row.cells [0]訪問當前行的特定單元格，Firebug會給我一個錯誤，那行.cells未定義。

我想知道是否有人可以對我遇到的這種情況有所瞭解。

來源

2010-01-24 Bob

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; 
}

注意，文本節點有#text一個nodeName和nodeName總是全部大寫返回該元素的名稱，無論你如何把它放在你的文件中。

來源

2010-01-24 06:26:04

謝謝，這是做到了。 – Bob

TextNode是正確的，因爲你確實在</tr>之後。

一個簡單的解決方法是將跳過這些textnodes - 通過任一計數或測試如果

row.tagName == 'TR'

來源

2010-01-24 06:23:48 Francis

測試'tr'不允許我遍歷所有行。正如其他人提到的，它必須是'TR'，tagName和nodeName。 – Bob

使用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 （或只是谷歌的rowIndex）

編輯：如果表中還包含THEAD和/或TFOOT那麼它可能更適合使用row.sectionRowIndex

來源

2010-02-01 12:12:43

Firefox中的奇怪DOM問題

回答

相關問題