Этот пост в блоге продемонстрирует процесс создания динамической таблицы в JavaScript.
Как динамически создать таблицу в JavaScript?
Давайте посмотрим на пример, объясняющий, как будет создана динамическая таблица в JavaScript.
Пример
Для начала напишите следующие строки в новом HTML-документе, чтобы создать форму, которая принимает данные, а затем отображает их в таблице путем динамического добавления:
< идентификатор div знак равно 'мояформа' >
< h4 > Заполните форму ниже : h4 >
< этикетка > Имя : этикетка >
< тип ввода знак равно 'текст' я бы знак равно 'имя' >< бр >< бр >
< этикетка > Пол : этикетка >
< тип ввода знак равно 'текст' я бы знак равно 'Пол' >< бр >< бр >
< этикетка > Обозначение : этикетка >
< тип ввода знак равно 'текст' я бы знак равно 'обозначение' >< бр >< бр >
< этикетка > Присоединение Свидание : этикетка >
< тип ввода знак равно 'свидание' я бы знак равно 'свидание' >< бр >< бр >
< идентификатор кнопки знак равно 'добавлять' ценность знак равно 'Добавлять' > Добавить данные в таблицу кнопка >
див >
В приведенном выше фрагменте кода:
- Сначала создайте заголовок « Заполните форму ниже: ».
- Создайте поля ввода для “ Имя », « Пол », « Обозначение ', а также ' Дата вступления ' с присвоенным идентификатором ' имя », « Пол », « обозначение ', а также ' свидание ” соответственно, чтобы принимать входные значения от пользователя.
- Эти идентификаторы используются для получения ссылки на элементы в JavaScript.
- Затем создайте кнопку с надписью « по щелчку », которое вызовет « добавитьТаблицуРов() ” в файле скрипта, чтобы добавить и отобразить данные в таблице:
Здесь, в файле HTML, напишите эти строки кода, чтобы создать структуру таблицы, в которую будут динамически добавляться данные:
< див >
< h4 > Запись сотрудника б > h4 >
< центр >
< идентификатор таблицы знак равно 'данные таблицы' граница знак равно '1' прокладка ячеек знак равно 'два' >
< тр >
< тд >< б > Имя б > тд >
< тд >< б > Пол б > тд >
< тд >< б > Обозначение б > тд >
< тд >< б > Дата вступления б > тд >
тр >
стол >
центр >
див >
В приведенном выше коде:
- Создайте таблицу с идентификатором « таблицаданные », который будет использоваться в файле сценария, чтобы получить ссылку на эту таблицу, а затем добавить в нее данные.
- В таблице четыре столбца: « Имя », « Пол », « Обозначение ', а также ' Дата вступления », который будет хранить данные в соответствии с именами столбцов.
Запуск файла HTML приведет к следующему выводу браузера:
Давайте добавим функциональность для динамического создания таблиц с помощью JavaScript. В файле скрипта или теге используйте приведенный ниже код, который динамически создаст таблицу:
функция addTableRow ( ) {был имя знак равно документ. получитьэлементбиид ( 'имя' ) ;
был Пол знак равно документ. получитьэлементбиид ( 'Пол' ) ;
был обозначение знак равно документ. получитьэлементбиид ( 'обозначение' ) ;
был свидание знак равно документ. получитьэлементбиид ( 'свидание' ) ;
был стол знак равно документ. получитьэлементбиид ( 'данные таблицы' ) ;
был количество строк знак равно стол. ряды . длина ;
был строка знак равно стол. вставить строку ( количество строк ) ;
строка. вставить ячейку ( 0 ) . внутреннийHTML знак равно имя. ценность ;
строка. вставить ячейку ( 1 ) . внутреннийHTML знак равно Пол. ценность ;
строка. вставить ячейку ( два ) . внутреннийHTML знак равно обозначение. ценность ;
строка. вставить ячейку ( 3 ) . внутреннийHTML знак равно свидание. ценность ;
}
В приведенном выше фрагменте:
- Во-первых, определите функцию « добавитьТаблицуРов() », который вызовет событие щелчка кнопки HTML.
- Затем получите ссылку на все поля ввода по одному, используя соответствующие им назначенные идентификаторы, используя « получитьэлемент по идентификатору() ” и сохраните их в переменных.
- Эти переменные будут использоваться для получения значения полей ввода с помощью HTML-кода. ценность » и задайте их в отдельных ячейках таблицы с помощью « внутреннийHTML ' имущество.
- Добавьте строки в таблицу, используя « таблица.строки.длина », а затем сохраняйте в нем значения.
Выход
Приведенный выше вывод показывает, что динамическая таблица успешно создана путем добавления данных в форму с помощью JavaScript.
Вывод
Динамическая таблица создается с использованием различных свойств HTML с предопределенными методами JavaScript. Сначала создайте форму в файле HTML, а затем получите ссылку на поля, используя предопределенные методы JavaScript, такие как « получитьэлемент по идентификатору() ', а затем получить введенные значения с помощью ' ценность ' имущество. Установите эти значения в соответствующих столбцах таблицы, используя « внутреннийHTML ' имущество. В этом сообщении блога демонстрируется процесс создания динамической таблицы в JavaScript.