JQuery каждый tr.children не определен в Firefox 3.0
У меня есть фрагмент кода, с которым я работаю для фильтрации строк в таблице. Он отлично работает во всех браузерах, кроме Firefox v3.0.x (отлично работает с 3.1 beta 2). Когда я запускаю фрагмент в Firefox 3.0.x, он говорит, что children is undefined. Я также использую jQuery v1.2.6.
Фрагмент кода:
var bodyRows = $("#resultsTable tbody tr");
bodyRows.each(function(n){
if (!filterPattern.test($.trim(this.children[2].innerHTML))){ //errors here
this.style.display = 'none';
}
else {
this.style.display = '';
}
});
Код выбирает все строки таблицы, а затем просматривает их, проверяя текст innerHTML 3-го столбца. Если тест RegEx не проходит, строка скрывается, в противном случае она отображается.
Кто-нибудь видел эту проблему и / или знает, как заставить ее работать?
Спасибо
Обновлено: Вот HTML-разметка таблицы. Для краткости я привожу в нем только 2 записи, хотя заполнены больше.
<table id = "resultsTable" cellpadding = "0" cellspacing = "0">
<thead>
<tr>
<th>First</th>
<th>Last</th>
<th>City</th>
<th>State</th>
<th>Zip</th>
<th>Email</th>
<th> </th>
</tr>
</thead>
<tbody id = "resultsBody">
<tr>
<th>James</th>
<th>Eggers</th>
<th>SomeCity</th>
<th>IA</th>
<th>55555</th>
<th>[email protected]</th>
<th> </th>
</tr>
<tr>
<th>John</th>
<th>Doe</th>
<th>SomeCity</th>
<th>KY</th>
<th>88888</th>
<th>[email protected]</th>
<th> </th>
</tr>
</tbody>
</table>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
вы можете проверить количество элементов в дочерних элементах, прежде чем пытаться получить доступ к третьему.
В таблице много 6 столбцов, поэтому дочерние элементы [2] должны быть допустимыми. Я также ожидаю, что одни и те же тесты будут успешными во всех браузерах, но только FF3.0 дает сбой.
Вы явно добавляете
<tbody>
...
</tbody>
тег к вашей таблице? Если нет, я бы посоветовал отбросить часть «tbody» из: $ ("# resultsTable tbody tr");
просто $ ("# resultsTable tr");
Мне любопытно, не создает ли эта версия Firefox его для вас неявно.
Я явно добавил вкладку tbody. Сейчас я обновлю основной вопрос с помощью html-разметки.
Почему бы вместо этого не использовать jQuery для обхода элементов DOM.
var bodyRows = $("#resultsTable tbody tr");
bodyRows.each(function(){
var thirdCell = $(this).find('td').eq(2);
if (!filterPattern.test($.trim(thirdCell.html()))){
this.style.display = 'none';
} else {
this.style.display = '';
}
});
Вы также можете использовать «.text()», если хотите, чтобы текст был возвращен без какой-либо возможной разметки.
Свойство children - это свойство DOM только для IE, которого нет ни в одном другом браузере (насколько мне известно). Firefox использует стандартное свойство childNodes для доступа к детям. Проблема с childNodes заключается в том, что он считает пробелы и текст узлом (или, по крайней мере, Firebug так говорит), что делает (на мой взгляд) очень сложным иметь дело. Если у вас есть JavaScript API, вы должны воспользоваться им, чтобы вам не приходилось сталкиваться с различиями между методами обхода DOM браузеров.
Я использую jQuery 1.2.6. После изменения дочерних узлов на childNodes, как вы упомянули, он начал работать без проблем. Спасибо!
Я предложил использовать jQuery потому, что разные браузеры требуют разного кода для доступа к элементам. Если вы используете jQuery вместо childNodes или children, вам не нужно беспокоиться о том, какое свойство использовать.
if (!filterPattern.test($.trim(this.children[2].innerHTML)))
Когда jQuery вызывает обратный вызов each, this является прямым узлом DOM браузера, а не объектом jQuery.
Путаница возникает из-за того, что jQuery предлагает «дочерний» метод в своих оболочках DOM, а IE предлагает нестандартную «дочернюю» коллекцию на своих собственных узлах DOM, но эти два интерфейса почти полностью несовместимы.
Поэтому используйте $ (this) .children () [2] или аналогичный для версии jQuery или this.getElementsByTagName ('td') [2] для стандартной версии DOM.
(Предполагая, что вы хотели сделать элементы данных таблицы 'td', а не 'th', что вы, вероятно, сделали. Также вы, вероятно, захотите получить необработанный текст ячейки, а не версию innerHTML, в которой символы могут быть экранированы неожиданным образом. )
Это не помогло бы с ошибкой о том, что дети не определены. В любом случае хорошая идея, но не решает проблемы.