Javascript.RU

Проблема 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);
+1

Автор: subzey, дата: 4 октября, 2010 - 11:21
#permalink

А все дело в том, что table не является родителем tr. Родитель tr — всегда tbody, даже если в html-коде его нет, tbody генерируется автоматически.

Так что, правильно будет:

insert_point.parentNode.insertBefore(tr, insert_point);

Опять же, если insert_point не Null


Автор: HelpeR, дата: 4 октября, 2010 - 13:29
#permalink

Спасибо, не подумал об этом!
Значит есть решение и это и не глюк и не не реализованный функционал языка!


Автор: tenshi, дата: 5 октября, 2010 - 23:20
#permalink

работа с дом имеет к языку очень опосредованное отношение
.ня


Автор: GreatRash, дата: 18 октября, 2010 - 11:21
#permalink

Для создания строки в таблице нужно использовать специальный метод:
table.insertRow(index)
а не изгаляться с createElement и insertBefore.

Тогда проблем не будет. Упс, не увидел приписку в конце поста Sad


Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 02:08
#permalink

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 02:11
#permalink

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 12:28
#permalink

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 12:30
#permalink

Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
15 + 3 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
HelpeR
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние комментарии
Последние темы на форуме
Forum