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

Часто при использовании 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);
}
0 удалить строку поднять строку опустить
1 удалить строку поднять строку опустить строку
2 удалить строку поднять строку опустить строку

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";

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

  1. Спасибо, очень помогло! И про рекламу незабыл!

  2. Эмм…я мож мало еще че погимаю, но я знаю только функцию getElementById, а не getElementSById, без с все прекрасно работает =)

  3. Эмм…я мож мало еще че погимаю, но я знаю только функцию getElementById, а не getElementSById, без с все прекрасно работает =)

  4. Мде
    А в файрфоксе moveRow не работает

    хуйня этот файрфокс

  5. Почему то не работает setAttribute("bgcolor","#ff0000) для ячеек таблицы TD, созданных с помощью createElement('TD') в Internet Explorer, вообще не могу никак там цвет сделать в таблице…. ( ФФ и ОПера все номрально.

  6. Спасибо за сайт! Очень помог разобраться с форматированием таблиц. Незнаю, ошибка ли это, но вот тут 's' в середине кода лишняя: var t = document.getElementsById('t1'); и еще, не разобравшись с: rows[i].className = "odd"; я выбрал способ: rows[i].style.background="#DDDDFF";

  7. добрый день,у меня есть форма хтмл, при заполнении которой,после нажатия кнопки, данные идут в базу, а из базы информация поступает в таблицу хтмл, которая расположена ниже этой формы.А мне надо чтобы информация обновлялась динамически по ходу внесения данных в форму, т е еще до нажатия кнопки, подскажите пожалуйста, может мне надо связать таблицу с формой напрямую(не через базу) или может есть какой то другой способ? и стоит ли мне переписать все вычисления с пхп на яваскрипт(для вызова onkeyup)? заранее спасибо!

  8. Спасибо! Реально очень ценная информация!

  9. Интересная статейка, даже для меня, человека недавно начавшем изучать js, написано все предельно понятным языком. В общем спасибо!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *