Странная проблема DOM с Firefox - PullRequest
Новая
       19

Странная проблема DOM с Firefox

2 голосов
/ 24 января 2010

У меня возникла странная проблема при попытке навигации по строкам и ячейкам таблицы в цикле while с использованием JavaScript. Я использую Firefox 3.5.7 на Win7 с включенным 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;
}

Проблема, с которой я сталкиваюсь, заключается в том, что в строке, прокомментированной «Строка вызова 1», Firebug выводит 

<tr id='firstRow'>

как и ожидалось. Тем не менее, во время цикла, Firebug дает мне 

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

Это дает мне другой вывод для одной и той же строки, даже сразу после того, как цикл while начинает выполняться, и больше ничего не трогает строку. Для последующих строк он, конечно, не имеет id = 'firstRow' в качестве атрибута.

Большая проблема, которую мне это дает, заключается в том, что если я нахожусь в цикле while и хочу получить доступ к определенной ячейке текущей строки, используя row.cells [0], Firebug выдаст мне ошибку в этой строке. ячейки не определены.

Я хочу знать, может ли кто-то пролить свет на ситуацию, с которой я сталкиваюсь.

Ответы [ 3 ]

2 голосов
/ 24 января 2010

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 всегда будет возвращать имя элемента во всех заглавных буквах независимо от того, как оно у вас в документе.

1 голос
/ 24 января 2010

TextNode верен, потому что он у вас есть после </tr>.

Простой обходной путь - пропустить эти текстовые узлы - путем подсчета или проверки, если 

row.tagName == 'TR'
0 голосов
/ 01 февраля 2010

Используйте коллекцию 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

...