Часто при использовании html таблиц с помощью JavaScript можно избежать лишних перезагрузок страницы, улучшить юзабилити и упростить работу пользователей.
Под динамической работой понимается:
- создание;
- управление атрибутами;
- добавление/удаление столбцов и строк;
- перемещение строк;
- заполнение ячеек
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 (по крайней мере мне не удалось заставить ее работать в других браузерах).
Следующий пример работает только в 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";
Спасибо, очень помогло! И про рекламу незабыл!
Эмм…я мож мало еще че погимаю, но я знаю только функцию getElementById, а не getElementSById, без с все прекрасно работает =)
Эмм…я мож мало еще че погимаю, но я знаю только функцию getElementById, а не getElementSById, без с все прекрасно работает =)
класный сайт
Почему то не работает setAttribute("bgcolor","#ff0000) для ячеек таблицы TD, созданных с помощью createElement('TD') в Internet Explorer, вообще не могу никак там цвет сделать в таблице…. ( ФФ и ОПера все номрально.
Спасибо за сайт! Очень помог разобраться с форматированием таблиц. Незнаю, ошибка ли это, но вот тут 's' в середине кода лишняя: var t = document.getElementsById('t1'); и еще, не разобравшись с: rows[i].className = "odd"; я выбрал способ: rows[i].style.background="#DDDDFF";
добрый день,у меня есть форма хтмл, при заполнении которой,после нажатия кнопки, данные идут в базу, а из базы информация поступает в таблицу хтмл, которая расположена ниже этой формы.А мне надо чтобы информация обновлялась динамически по ходу внесения данных в форму, т е еще до нажатия кнопки, подскажите пожалуйста, может мне надо связать таблицу с формой напрямую(не через базу) или может есть какой то другой способ? и стоит ли мне переписать все вычисления с пхп на яваскрипт(для вызова onkeyup)? заранее спасибо!
Спасибо! Реально очень ценная информация!
Интересная статейка, даже для меня, человека недавно начавшем изучать js, написано все предельно понятным языком. В общем спасибо!
Просто, кратко, доступно. Спасибо.
Огромное спасибо! Все очень четко и понятно!!! Давно хотел разобраться с построением таблиц, но хорошей статьи не попадалось!!! Еще раз спасибо!!!
Проверка записи,