Проблема insertBefore с таблицей
В этом посту я опишу глюк или не реализованный функционал языка.
Недавно я столкнулся с задачей вставки узла в определенное место таблицы. Вставку решил выполнить с помощью insertBefore.
<table id="tbl">
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
</table>
var table = document.getElementById('tbl');
var tr = document.createElement('tr');
var td = document.createElement('td');
var txt = document.createTextNode('Hello');
var insert_point = table.rows[1];
td.appendChild(txt);
tr.appendChild(td);
table.insertBefore(tr, insert_point);
Этот метод вызвал ошибку
Ошибка: uncaught exception: [Exception... "Node was not found" code: "8" nsresult: "0x80530008 (NS_ERROR_DOM_NOT_FOUND_ERR)"
Т.е. insertBefore не может вставить узел в таблицу, хотя, что самое интересное, appendChild нормально вставляет узел в конец таблицы.
var table = document.getElementById('tbl');
var tr = document.createElement('tr');
var td = document.createElement('td');
var txt = document.createTextNode('Append Child');
td.appendChild(txt);
tr.appendChild(td);
table.appendChild(tr);
Выходом из этой ситуации является метод insertRow
var table = document.getElementById('tbl');
var txt = document.createTextNode('Insert Row');
table.insertRow(1).insertCell(0).appendChild(txt);
|
А все дело в том, что table не является родителем tr. Родитель tr — всегда tbody, даже если в html-коде его нет, tbody генерируется автоматически.
Так что, правильно будет:
Опять же, если insert_point не Null
Спасибо, не подумал об этом!
Значит есть решение и это и не глюк и не не реализованный функционал языка!
работа с дом имеет к языку очень опосредованное отношение
.ня
Для создания строки в таблице нужно использовать специальный метод:
table.insertRow(index)
а не изгаляться с createElement и insertBefore.
Тогда проблем не будет. Упс, не увидел приписку в конце поста