Динамическая работа с таблицами

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

1. создание;
2. управление атрибутами;
3. добавление/удаление столбцов и строк;
4. перемещение строк;
5. заполнение ячеек

1. создание таблицы

Для того, чтобы создать новую таблицу на странице нужно сгенерировать элемент TABLE (createElement()) и добавить его в иерархическую структуру документа с помощью метода appendChild():

var newElem=document.createElement('table');
document.body.appendChild(newElem);

2. управление атрибутами

Есть два способа присвоения атрибутов элементу: использование метода setAttribute()

var newElem=document.createElement('table');
newElem.setAttribute('id','tl');
newElem.setAttribute('width','500');
newElem.setAttribute('border','1');
document.body.appendChild(newElem);

и прямое обращение к свойствам объекта

var newElem=document.createElement('table');
newElem.id='tl';
newElem.width=500;
newElem.border=1;
document.body.appendChild(newElem);

Есть и более простой способ добавления в документ таблицы с определенными атрибутами:

document.body.innerHTML='

‘;

3. добавление/удаление столбцов и строк и 4. перемещение строк

Для вставки строк используется метод insertRow(), ячеек — insertCell():

    var newElem=document.createElement("table");

    var newRow=newElem.insertRow(0);
    var newCell = newRow.insertCell(0);
    newCell.width="200";
    newCell.innerHTML="строка 1 столбец 1";

    var newCell = newRow.insertCell(1);
    newCell.width="400";
    newCell.innerHTML="строка 1 столбец 2";

    var newRow=newElem.insertRow(1);
    var newCell = newRow.insertCell(0);
    newCell.width="200";
    newCell.innerHTML="строка 2 столбец 1";

    var newCell = newRow.insertCell(1);
    newCell.width="400";
    newCell.innerHTML="строка 2 столбец 2";

    document.body.appendChild(newElem);

Для удаления строк используется метод deleteRow(), по своей конструкции аналогичный методу insertRow(), ячейки — deleteCell(). Для перемещения строк существует функция moveRow(индекс_источника, индекс_приёмника), но она пока работает только в IE (по крайней мере мне не удалось заставить ее работать в других браузерах). Про кроссбраузерную функцию перемещения строк см. сортировка html таблицы средствами JavaScript.

Следующий пример работает только в IE:

var dt = document.getElementById("t1");

function delete_tr(obj) {
    var num_tr=obj.parentNode.sectionRowIndex;
    dt.deleteRow(num_tr)
}
function up_tr(obj) {
    var num_tr=obj.parentNode.sectionRowIndex;
    if (num_tr!=0) dt.moveRow(num_tr, num_tr-1);
}
function down_tr(obj) {
    var num_all_tr=obj.parentNode.parentNode.childNodes.length;
    var num_tr=obj.parentNode.sectionRowIndex;
    if (num_tr!=num_all_tr-1) dt.moveRow(num_tr, num_tr+1);
}

5. заполнение ячеек

Заполнение ячеек возможно с помощью свойств innerHTML и innerTEXT (их отличия, думаю, понятны из названия):

document.getElementById('идентификатор').innerHTML = 'something';

дополнительно

Как перебрать в цикле все таблицы на странице:

var tables = document.getElementsByTagName("table");
for ( var t = 0; t < tables.length; t++ )
{ ... }

Как перебрать в цикле все ячейки таблицы:

var td_cells=document.getElementById("tl").cells;
for (var i=0; i < td_cells.length; i++)
alert(td_cells[i].innerHTML);

как закрасить строки таблицы через одну:

var t = document.getElementsById('t1');
var rows = t.getElementsByTagName("tr");
for ( var i = 1; i < rows.length; i += 2 )
rows[i].className = "odd";