js динамическое создание таблицы

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

1. создание;
2. управление атрибутами;
3. добавление/удаление столбцов и строк;
4. перемещение строк;
5. заполнение ячеек

1. создание таблицы

Для того, чтобы создать новую таблицу на странице нужно сгенерировать элемент TABLE (createElement()) и добавить его в иерархическую структуру документа с помощью метода appendChild():

2. управление атрибутами

Есть два способа присвоения атрибутов элементу: использование метода setAttribute()

и прямое обращение к свойствам объекта

Есть и более простой способ добавления в документ таблицы с определенными атрибутами:

3. добавление/удаление столбцов и строк и 4. перемещение строк

Для вставки строк используется метод insertRow(), ячеек — insertCell():

Для удаления строк используется метод deleteRow(), по своей конструкции аналогичный методу insertRow(), ячейки — deleteCell(). Для перемещения строк существует функция moveRow(индекс_источника, индекс_приёмника), но она пока работает только в IE (по крайней мере мне не удалось заставить ее работать в других браузерах). Про кроссбраузерную функцию перемещения строк см. сортировка html таблицы средствами JavaScript.

Следующий пример работает только в IE:

0	удалить строку	поднять строку	опустить
1	удалить строку	поднять строку	опустить строку
2	удалить строку	поднять строку	опустить строку

5. заполнение ячеек

Заполнение ячеек возможно с помощью свойств innerHTML и innerTEXT (их отличия, думаю, понятны из названия):

дополнительно

Как перебрать в цикле все таблицы на странице:

Массив с этими объектами хранится в localStorage, как для каждого объекта из localStorage сделать свою таблицу на html странице?

1 ответ 1

поле относительное и роли никакой не играет

Всё ещё ищете ответ? Посмотрите другие вопросы с метками javascript html или задайте свой вопрос.

Связанные

Похожие

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2019 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2019.11.15.35459

Может кто-нибудь сказать мне, что случилось с этим кодом? Я хочу создать таблицу с двумя столбцами и тремя строками, а в ячейках я хочу Text1 и Text2 для каждой строки. Этот код создает таблицу с двумя столбцами и тремя строками, но это только текст в ячейках третьей строки (остальные пустые).

Вы должны создать td и текстовые узлы в цикле. Ваш код создает только 2 td, поэтому видны только 2. Пример:

Это потому, что вы создаете только два элемента td и 2 текстовых узла.

Создание всех узлов в цикле

Восстановите узлы внутри вашего цикла:

Создание клонирования в цикле

Создайте их заранее и клонируйте их внутри цикла:

Таблица factory с текстовой строкой

Сделать таблицу factory:

И используйте его следующим образом:

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

factory можно легко изменить, чтобы принять функцию также для четвертого аргумента, чтобы заполнить содержимое каждой ячейки более динамичным образом.

Используется следующим образом:

Вам нужно создать новые текстовые узлы, а также узлы td для каждого столбца, а не повторно использовать их среди всех столбцов, как это делает ваш код.

Изменить: Внесите свой код так:

когда вы говорите «appendchild», вы фактически перемещаете своего ребенка от одного родителя к другому. вам нужно создать node для каждой ячейки.

В моем примере серийный номер управляется в соответствии с действиями, выполняемыми в каждой строке с помощью css. Я использовал форму внутри каждой строки, и когда новая строка была создана, форма получит reset.

Надеюсь, что это поможет.

В моем примере вызовите функцию добавления из события нажатия кнопки, а затем получите значение из элемента управления формы и вызовите функцию generateTable.
В проверке функции generateTable первая Таблица генерируется или нет. Если таблица не определена, тогда вызовите функцию generateHeader и Generate Header, а затем вызовите функцию addToRow для добавления новой строки в таблицу.

Посмотрите другие вопросы по меткам javascript dom или Задайте вопрос