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

Часто при использовании 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";

 

Оцените статью
Добавить комментарий

  1. XprogeR

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

  2. anonymous

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

  3. BANderLOG

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

  4. ALX

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

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

  5. OPium

    класный сайт

  6. Антон

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

  7. Александр

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

  8. Саша

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

  9. crump

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

  10. Максим

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

  11. Владимир

    Просто, кратко, доступно. Спасибо.

  12. Антон

    Огромное спасибо! Все очень четко и понятно!!! Давно хотел разобраться с построением таблиц, но хорошей статьи не попадалось!!! Еще раз спасибо!!!