Часто при использовании 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, без с все прекрасно работает =)
Мде
А в файрфоксе moveRow не работает
хуйня этот файрфокс
класный сайт
Почему то не работает 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, написано все предельно понятным языком. В общем спасибо!
Просто, кратко, доступно. Спасибо.
Огромное спасибо! Все очень четко и понятно!!! Давно хотел разобраться с построением таблиц, но хорошей статьи не попадалось!!! Еще раз спасибо!!!
Проверка записи,
Как получить редактируемая таблица javascript
Где узнать про редактируемая таблица javascript
Как получить редактируемая таблица javascript
Нужен редактируемая таблица javascript
Как получить редактируемая таблица javascript
Нужен редактируемая таблица javascript
Нужен редактируемая таблица javascript
Хочу купить редактируемая таблица javascript