среда, 22 апреля 2009 г.

Генерация таблиц в DOM'е

Данная запись посвящена динамическому созданию таблиц на html-странице. С одной стороны решение тривиальное:

var tr = document.createElement("tr");
for (var i = 0; i < 3; ++i) {
var td = document.createElement("td");
td.innerHTML = i;
tr.appendChild(td);
}

var table = document.createElement("table");
table.appendChild(tr);

var obj = document.getElementById("container");
obj.appendChild(table);

Скрипт создает строку таблицы, забивает ее ячейками с информационно-значимым контентом. Далее полученная строка добавляется к таблице - и всё ok? Во всех развитых браузерах, разумеется, этого достаточно.
Но есть один особенный бразуер, занимающий лидирующие на данный момент позиции на рынке, из-за чего качественному web-разработчику его нельзя игнорировать - ie. Создаваемая указанным скриптом таблица в ie7 выглядит следующим образом.
При этом по DOM-у все в порядке - строка и ячейки созданы и располагаются в таблице.
Оказывается, ie ещё помнит старый-добрый тег tbody. И при парсинге всем таблицам его добавляет. Так, вполне грамотная с виду таблица, записанная в виде html

<table>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
</tr>
</table>

...в DOM-е ie7 будет выглядеть следующим образом:
Посему и при динамическом создании таблиц непосредственно в DOM браузера ie7 следует делать такие поправки:

var tbody = document.createElement("tbody");
tbody.appendChild(tr);
var table = document.createElement("table");
table.appendChild(tbody);

Не будет откровением, что все грамотные браузеры без проблем распознают и указанную выше модификацию.

Комментариев нет:

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