Dom працюємо з рядками і осередками таблиці - стаття на

Попередня ↔ Наступна

Перед вами стоїть завдання "препарувати" таблицю. Пройтися по її рядках і осередкам, щось видалити, щось додати. Зачепившись за елемент table, ми починаємо використовувати звичні DOM-властивості і методи: firstChild, createElement, appendChild і ін. І раптом виявляється, що все працює зовсім не так, як уявлялося на перший погляд.

неправильний підхід

Є проста таблиця, з ідентифікатором "tableId", в якій потрібно видалити першу і додати в кінець новий рядок:

row: 1, cell: 1	row: 1, cell: 2
row: 2, cell: 1	row: 2, cell: 2

Вирішимо задачу звичними методами, виконавши функцію no ():

function no # 40; # 41; # 123;
var table = document. getElementById # 40; "TableId" # 41; ;
// Перейдемо до першому рядку таблиці
var tr1 = table. firstChild;
alert # 40; tr1. nodeName # 41; ; // В IE і Opera виведе "TBODY", а в Gecko - "#text"
// Не вийшло, йдемо іншим шляхом
var allRows = table. getElementsByTagName # 40; "Tr" # 41; ;
tr1 = allRows # 91; 0 # 93; ;
// Видаляємо перший рядок
tr1. parentNode. removeChild # 40; tr1 # 41; ;
// Створюємо новий рядок
var tr3 = document. createElement # 40; "Tr" # 41; ;
tr3. innerHTML = "row: 3, cell: 1row: 3, cell: 2";
// Додаємо її в таблицю
allRows = table. getElementsByTagName # 40; "Tr" # 41; ;
tr3 = allRows # 91; 0 # 93 ;. parentNode. appendChild # 40; tr3 # 41; ; / * Ось тут дуже цікаво
В IE рядок не відобразилася зовсім, тому що в доданій рядку знаходяться биті осередки, без відкриваючого тега td
У Gecko додався тільки елемент TR, що містить рядок "row: 3, cell: 1row: 3, cell: 2" без осередків
Тільки в Опері все відпрацювало як замислювалося
* /
// затирають додану рядок
alert # 40; "Зараз відбудеться видалення рядка" # 41; ;
tr3. parentNode. removeChild # 40; tr3 # 41; ;
// Додаємо те, що хочемо більш коректно, через DOM
alert # 40; "Повторне додавання рядка" # 41; ;
var td3_1 = document. createElement # 40; "Td" # 41; ;
td3_1. innerHTML = "row: 3, cell: 1";
var td3_2 = document. createElement # 40; "Td" # 41; ;
td3_2. innerHTML = "row: 3, cell: 2";
tr3 = document. createElement # 40; "Tr" # 41; ;
tr3. appendChild # 40; td3_1 # 41; ;
tr3. appendChild # 40; td3_2 # 41; ;
allRows = table. getElementsByTagName # 40; "Tr" # 41; ;
tr3 = allRows # 91; 0 # 93 ;. parentNode. appendChild # 40; tr3 # 41; ;
// УРА!
# 125;

Правильне рішення

Поки ми намагаємося знайти кросбраузерності способи роботи з елементами таблиці, в DOM2 давно описаний зручний інтерфейс якраз для вирішення таких завдань. Чомусь рунеті, не багато матеріалів на цю тему, так що зупинимося більш детально на розборі необхідних властивостей і методів:

Interface HTMLTableElement

Властивість rows. повертає колекцію вузлів рядків таблиці, readonly.
Метод deleteRow приймає в якості аргументу індекс рядка, яка підлягає видаленню. Індексація починається з нуля.
Метод insertRow приймає в якості аргументу індекс рядка, перед якою буде вставлена нова рядок. Повертає посилання на нову вставлену рядок.

Також є властивості і методи для роботи з елементами THEAD, TFOOT, TBODY і CAPTION. але через нечастого використання зупинятися на них докладно не будемо.

Interface HTMLTableRowElement

Властивість cells. повертає колекцію вузлів осередків для рядка, readonly.
Метод deleteCell приймає в якості аргументу індекс осередку рядки, яка підлягає видаленню. Індексація починається з нуля.
Метод insertCell приймає в якості аргументу індекс осередки, перед якою буде вставлена нова осередок в рядку. Повертає посилання на нову вставлену осередок.

Interface HTMLTableCellElement

Властивість cellIndex. повертає індекс осередку в рядку (від нуля) readonly.

Вирішимо кросбраузерності поставлену задачу за допомогою перерахованих вище властивостей і методів:

function yes # 40; # 41; # 123;
var table = document. getElementById # 40; "TableId" # 41; ;
table. deleteRow # 40; 0 # 41; ;
var newrow = table. insertRow # 40; -1 # 41; ;
newrow. insertCell # 40; -1 # 41 ;. innerHTML = "row: 3, cell: 1";
newrow. insertCell # 40; -1 # 41 ;. innerHTML = "row: 3, cell: 2";
# 125;