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 мы можем наблюдать примерно следующее:
Обработать этого монстра мы можем следующим образом:
Таблица с заранее проставляемыми строками
По просьбам трудящихся выкладываю скрипт таблицы с заранее проставляемыми строками:
Поле 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 = »
» ;
// Добавляем её в таблицу
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. Удачи!