Динамическое добавление строк в таблицу

Нужно мне было динамически вставлять строки в таблицу. Написал я такой код на Javascript:

var tr = document.createElement("tr");
var td_1 = document.createElement("td");
td_1.setAttribute("class", "td_class");
td_1.setAttribute("colspan","2");
td_1.innerHTML = "Содержание ячейки 1";
tr.appendChild(td_1);
var td_2 = document.createElement("td");
td_2.innerHTML = "Содержание ячейки 2";
tr.appendChild(td_2);
var parent_table = document.getElementById("parent_table");
parent_table.appendChild(tr);

Используется, естественно, DOM. HTML-код выглядит следующим образом (фрагмент):

<table id="parent_table">
</table>

Запускаем. В Мозилле, конечно, все ок. Но в Internet Explorer не работает. Ничего не происходит. Разбираемся.
Небольшое изыскание дало следующее направление. IE не поддерживает добавление строк к элементу "<table>", но позволяет добавлять строки в элементы типа "<thead>", "<tbody>" и т.п.
Перписываем HTML следующим образом:

<table>
<tbody id="parent_table">
</tbody>
</table>

Запускаем. Строки добавляются, CSS class не подцепляется, параметр "colspan" не учитывается.
Переделываем код следующим образом (изменения отображены красным цветом):

var tr = document.createElement("tr");
var td_1 = document.createElement("td");
td_1.className = "td_class";
td_1.setAttribute("colspan","2");
td_1.innerHTML = "Содержание ячейки 1";
tr.appendChild(td_1);
var td_2 = document.createElement("td");
td_2.innerHTML = "Содержание ячейки 2";
tr.appendChild(td_2);
var parent_table = document.getElementById("parent_table");
parent_table.appendChild(tr);

Теперь CSS-форматирование присутствует и в Мозилле, и в IE. Cледующим шагом заставим IE правильно обрабатывать параметр "colspan".

var tr = document.createElement("tr");
var td_1 = document.createElement("td");
td_1.className = "td_class";
td_1.colSpan=2;
td_1.innerHTML = "Содержание ячейки 1";
tr.appendChild(td_1);
var td_2 = document.createElement("td");
td_2.innerHTML = "Содержание ячейки 2";
tr.appendChild(td_2);
var parent_table = document.getElementById("parent_table");
parent_table.appendChild(tr);

Вот теперь все работает, как хотелось.
Буду рад услышать ваши комментарии.





Метки Technorati: javascript, программирование