Javascript добавление строки в таблицу

Javascript динамическая html таблица

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

Внимание! По просьбе уважаемого Павла скрипт был доработан. В результате он стал более функционален. Теперь есть возможность размещать и другие элементы html-формы. Скрипт стал меньше размером. Вдобавок немного изменилась структура данных отправляемая на сервер, на мой взгляд она стала более удобна. К сожалению, если приводить описание скрипта на странице, то нужно полностью переписывать статью, а мне делать этого не охота. Поэтому я залил новый скрипт в свой репозиторий: Динамическая html таблица там так же есть полноценный пример и описание как его использовать и пример как обработать данные на сервере.

Получившаяся в итоге html таблица будет примерно следующей:

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

Метод	Описание
createCaption()	Создает пустой элемент заголовка и добавляет его в таблицу
createTFoot()	Создает пустой элемент TFOOT и добавляет его в таблицу
createTHead()	Создает пустой элемент THEAD и добавляет его в таблицу
deleteCaption()	Удаляет первый элемент caption
deleteRow()	Удаляет строку из таблицы
deleteTFoot()	Удаляет элемент TFOOT из таблицы
deleteTHead()	Удаляет элемент THEAD из таблицы
insertRow()	Создает пустую строку и добавляет её в таблицу

Используя данный инструментарий создадим нашу динамическую html таблицу. Я подумал, что исходная таблица для работы должна быть как можно более естественная. Навроде вот этой:

В итоге в сжатом виде скрипт динамической html таблицы «весит» 1.15Кб и предоставляет всего одну функцию — конструктор DynamicTable которая принимает три параметра:

GLOB — глобальный контекст (объект window или this)

htmlTable — html — элемент таблица, которую будем делать динамичной.

config — объект конфигурации *

* Объект конфигурации должен содержать свойства в виде целых чисел:

значения которых станут имена подмассивов. Если попробовать объяснить проще, то сама html таблица это ассоциативный массив, а столбцы таблицы — это индексные массивы. в общем ниже приведена трассировка результирующего массива. Такой он получится, если 3 параметр конфиг, передать таким, каким он показан в примере. Ниже я приведу полный листинг скрипта с подробными комментариями.

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

Как всегда, если убрать комментарии — он не такой уж и страшныйНо для срабатывания нужно вызвать функцию DynamicTable как конструктор (в принципе можно и просто как функцию, у нас есть страховка) следующим образом:

Я думаю найти применение данному скрипту вполне возможно.

Вместо ответа на вопрос от пользователя Яна в одном из комментариев приведу простенький пример занесения данных в базу MySQL

После того, как форма «ушла» на сервер в массиве $_POST мы можем наблюдать примерно следующее:

Обработать этого монстра мы можем следующим образом:

Таблица с заранее проставляемыми строками

По просьбам трудящихся выкладываю скрипт таблицы с заранее проставляемыми строками:

Поле 1

Поле 2	Поле 3	Поле 4

Логика серверной стороны может быть такой же как и у таблицы сверху

Нам понадобится вот такой html-каркас:

А вот собственно реализация функции setupTable

Забираем и пользуемся на здоровье

DOM: Работаем со строками и ячейками таблицы

Перед вами стоит задача «препарировать» таблицу. Пройтись по её строкам и ячейкам, что-то удалить, что-то добавить. Зацепившись за элемент table, мы начинаем использовать привычные DOM-свойства и методы: firstChild, createElement, appendChild и др. И вдруг оказывается, что всё работает совсем не так, как представлялось на первый взгляд.

Неправильный подход

Есть простая таблица, с идентификатором «tableId», в которой требуется удалить первую и добавить в конец новую строку:

row:1, cell:1	row:1, cell:2
row:2, cell:1	row:2, cell:2

Решим задачу привычными методами, выполнив функцию no() :

function no ( ) <
var table = document. getElementById ( «tableId» ) ;
// Перейдем к первой строке таблицы
var tr1 = table. firstChild ;
alert ( tr1. nodeName ) ; // В IE и Opera выведет «TBODY», а в Gecko — «#text»
// Не получилось, идем другим путем
var allRows = table. getElementsByTagName ( «tr» ) ;
tr1 = allRows [ 0 ] ;
// Удаляем первую строку
tr1. parentNode . removeChild ( tr1 ) ;
// Создаем новую строку
var tr3 = document. createElement ( «tr» ) ;
tr3. innerHTML = »

row:3, cell:1row:3, cell:2

» ;
// Добавляем её в таблицу
allRows = table. getElementsByTagName ( «tr» ) ;
tr3 = allRows [ 0 ] . parentNode . appendChild ( tr3 ) ; /* Вот здесь совсем интересно
В IE строка не отобразилась вовсе, т.к. в добавленной строке находятся битые ячейки, без открывающего тега td
В Gecko добавился только элемент TR, содержащий строку «row:3, cell:1row:3, cell:2» без ячеек
Только в Опере всё отработало как задумывалось
*/
// Затираем добавленную строку
alert ( «Сейчас произойдет удаление строки» ) ;
tr3. parentNode . removeChild ( tr3 ) ;
// Добавляем то, что хотим более корректно, через DOM
alert ( «Повторное добавление строки» ) ;
var td3_1 = document. createElement ( «td» ) ;
td3_1. innerHTML = «row:3, cell:1» ;
var td3_2 = document. createElement ( «td» ) ;
td3_2. innerHTML = «row:3, cell:2» ;
tr3 = document. createElement ( «tr» ) ;
tr3. appendChild ( td3_1 ) ;
tr3. appendChild ( td3_2 ) ;
allRows = table. getElementsByTagName ( «tr» ) ;
tr3 = allRows [ 0 ] . parentNode . appendChild ( tr3 ) ;
// УРА!
>

Как видно из комментариев к коде, в итоге задача решена, но не очень гибким (и уж точно некрасивым) способом.

Правильное решение

Пока мы пытаемся найти кроссбраузерные способы работы с элементами таблицы, в DOM2 давно описан удобный интерфейс как раз для решения таких задач. Почему-то рунете, не много материалов на эту тему, так что остановимся более подробно на разборе необходимых свойств и методов:

Interface HTMLTableElement

• Свойство rows, возвращает коллекцию узлов строк таблицы, readonly.
• Метод deleteRow принимает в качестве аргумента индекс строки, которая подлежит удалению. Индексация начинается с нуля.
• Метод insertRow принимает в качестве аргумента индекс строки, перед которой будет вставлена новая строка. Возвращает ссылку на новую вставленную строку.

Также есть свойства и методы для работы с элементами THEAD, TFOOT, TBODY и CAPTION , но из-за нечастого использования останавливаться на них подробно не будем.

Interface HTMLTableRowElement

• Свойство cells, возвращает коллекцию узлов ячеек для строки, readonly.
• Метод deleteCell принимает в качестве аргумента индекс ячейки строки, которая подлежит удалению. Индексация начинается с нуля.
• Метод insertCell принимает в качестве аргумента индекс ячейки, перед которой будет вставлена новая ячейка в строке. Возвращает ссылку на новую вставленную ячейку.

Interface HTMLTableCellElement

• Свойство cellIndex, возвращает индекс ячейке в строке (от нуля) readonly.

Решим кроссбраузерно поставленную задачу с помощью перечисленных выше свойств и методов:

Надеюсь описанный в этой статье интерфейс облегчит вам работу с таблицами в DOM. Удачи!