IE v. FF: Действительно ли table.tBodies[0]?

Судя по тому, что я понял, tBodies[0] работает в IE, но не в FF. Это ошибка IE? Я создал небольшой файл, чтобы продемонстрировать несоответствие, и я хотел бы знать, как лучше всего это сделать.

HTML:

<html>
<body>
 <table id="dataGrid">
 </table>
 <input type="button" onclick="insertRow();" value="New row">
</body>
</html>

Этот скрипт должен добавлять строку при каждом нажатии кнопки. Это работает в IE, но ломается в Firefox:

<script type="text/javascript" src="/costplan/script/prototype.js"></script>
<script>    
function insertRow(){
 var objTbl = $('dataGrid').tBodies[0]; 
 lastRow = objTbl.rows.length;
 alert(lastRow);
 var newRow = objTbl.insertRow(lastRow);
}
</script>

Является ли tBodies [0] недействительным? Я не уверен, почему, но этот код работает как в FF, так и в IE:

<script type="text/javascript" src="/costplan/script/prototype.js"></script>
<script>
function insertRow(){
 var objTbl = $('dataGrid');
 lastRow = objTbl.rows.length;
 alert(lastRow);
 var newRow = objTbl.insertRow(lastRow);
}    
</script>

Являются ли эти функции правильными? По сути, я не знаю, что происходит (я понимаю, что по крайней мере один из этих сценариев недействителен, но я не знаю, какой или почему).

1 ответ

tBodies Это свойство является частью стандарта DOM Level 2 и работает в обоих браузерах.

Разница в том, что IE всегда внедряет TBODY элемент как дочерний элемент вашей пустой таблицы.

Firefox, Chrome и другие браузеры не делают этого, если элемент пуст, если TABLE элемент имеет хотя бы один TR или же TH они создадут TBODY неявно.

Вы можете добавить TBODY элемент, и ваш пример будет работать без проблем:

<table id="dataGrid">
  <tbody>
  </tbody>
</table>
Другие вопросы по тегам