В этом руководстве для объяснения процедуры добавления строки в таблицу будет использоваться JavaScript.
Как добавить строку в таблицу HTML с помощью JavaScript?
Для добавления строки в таблицу используйте следующие процедуры:
Проверим каждую процедуру по отдельности.
Способ 1: добавить строку в таблицу HTML с помощью метода insertRow()
“ вставить строку () ” используется для добавления новой строки в начало таблицы. Он создает новый элемент
Если вы собираетесь добавить строку в последний/конец таблицы, передайте индекс « -1 » в качестве аргумента.
Синтаксис
Используйте следующий синтаксис для добавления строк в таблицу с помощью метода insertRow():
стол. вставить строку ( индекс ) ;
Здесь, ' индекс ” указывает позицию, в которую вы хотите добавить новую строку, например, в конец таблицы или в начало.
Пример 1: Добавление строки вверху/началу таблицы
Здесь мы создадим таблицу и кнопку в файле HTML, используя HTML <таблица> а также <кнопка> теги. Таблица содержит три строки и три столбца или ячейки:
< идентификатор таблицы знак равно 'стол' >< тр >
< тд > Ячейка строки 1 тд >
< тд > Ячейка строки 1 тд >
< тд > Ячейка строки 1 тд >
тр >
< тр >
< тд > Ячейка строки два тд >
< тд > Ячейка строки два тд >
< тд > Ячейка строки два тд >
тр >
< тр >
< тд > Ячейка строки 3 тд >
< тд > Ячейка строки 3 тд >
< тд > Ячейка строки 3 тд >
тр >
стол >
< бр >
Затем создайте кнопку, которая будет вызывать « Добавить ряд() ” при нажатии:
< тип кнопки знак равно 'кнопка' по щелчку знак равно 'Добавить ряд()' > Нажмите, чтобы добавить строку вверху таблицы кнопка >Для стилизации таблицы мы установим границу каждой ячейки и таблицы, как показано ниже:
стол, тд {граница : 1px сплошной черный ;
}
Теперь мы добавим строки в таблицу в начало/начало таблицы, используя JavaScript. Для этого определите функцию с именем « Добавить ряд() », который будет вызываться в событии кнопки onclick(). Затем выберите созданную таблицу с помощью « получитьэлемент по идентификатору() метод. После этого позвоните в « вставить строку () ', передав ' 0 ” index в качестве параметра, указывающего, что строка будет добавлена в начало таблицы.
Затем вызовите « вставить ячейку() », передавая индексы, которые показывают, сколько ячеек будет добавлено в строку. Наконец, добавьте текстовые данные или текст в ячейки, используя « внутреннийHTML ' имущество:
функция addRow ( ) {var tableRow знак равно документ. получитьэлементбиид ( 'стол' ) ;
был ряд знак равно таблицаСтрока. вставить строку ( 0 ) ;
где ячейка1 знак равно строка. вставить ячейку ( 0 ) ;
где ячейка2 знак равно строка. вставить ячейку ( 1 ) ;
где ячейка3 знак равно строка. вставить ячейку ( два ) ;
ячейка1. внутреннийHTML знак равно «Клетка нового ряда» ;
ячейка2. внутреннийHTML знак равно «Клетка нового ряда» ;
ячейка3. внутреннийHTML знак равно «Клетка нового ряда» ;
}
Как вы можете видеть в выводе, новая строка добавляется вверху существующей таблицы при нажатии на кнопку:
Пример 2: добавление строки в конец таблицы
Если вы хотите вставить строку в последний/конец таблицы, передайте « -1 ” индекс к “ вставить строку () метод. Наконец, он добавит строку при нажатии кнопки:
функция addRow ( ) {var tableRow знак равно документ. получитьэлементбиид ( 'стол' ) ;
был ряд знак равно таблицаСтрока. вставить строку ( - 1 ) ;
где ячейка1 знак равно строка. вставить ячейку ( 0 ) ;
где ячейка2 знак равно строка. вставить ячейку ( 1 ) ;
где ячейка3 знак равно строка. вставить ячейку ( два ) ;
ячейка1. внутреннийHTML знак равно «Клетка нового ряда» ;
ячейка2. внутреннийHTML знак равно «Клетка нового ряда» ;
ячейка3. внутреннийHTML знак равно «Клетка нового ряда» ;
}
Выход
Давайте перейдем к другому методу!
Способ 2: добавить строку в таблицу HTML, создав новый элемент
Существует еще один метод добавления строки в таблицу, который создает новые элементы с использованием методов JavaScript, в том числе « создатьЭлемент() 'метод' и ' добавить дочерний элемент () метод. Метод createElement() создает элементы
Синтаксис
Следуйте предоставленному синтаксису, чтобы создать новый элемент для добавления строки в таблицу с помощью JavaScript:
документ. создатьЭлемент ( 'тр' ) ;Здесь « тр ” — это строка таблицы.
Пример
Теперь мы будем использовать ту же ранее созданную таблицу в HTML с файлом CSS, но в файле JavaScript мы будем использовать « создатьЭлемент() метод. Затем добавьте данные или текст в ячейки, используя « внутреннийHTML ' имущество. Наконец, вызовите « добавить дочерний элемент () », который добавит ячейки в строку, а затем строку в таблицу:
функция addRow ( ) {var tableRow знак равно документ. получитьэлементбиид ( 'стол' ) ;
был ряд знак равно документ. создатьЭлемент ( 'тр' ) ;
где ячейка1 знак равно документ. создатьЭлемент ( 'тд' ) ;
где ячейка2 знак равно документ. создатьЭлемент ( 'тд' ) ;
где ячейка3 знак равно документ. создатьЭлемент ( 'тд' ) ;
ячейка1. внутреннийHTML знак равно «Клетка нового ряда» ;
ячейка2. внутреннийHTML знак равно «Клетка нового ряда» ;
ячейка3. внутреннийHTML знак равно «Клетка нового ряда» ;
строка. appendChild ( ячейка1 ) ;
строка. appendChild ( ячейка2 ) ;
строка. appendChild ( ячейка3 ) ;
таблицаСтрока. appendChild ( строка ) ;
}
Вывод показывает, что новая строка успешно добавлена в конец таблицы:
Мы собрали все методы добавления строки в таблицу с помощью JavaScript.
Вывод
Для добавления строки в таблицу используйте два подхода: метод insertRow() или создайте новый элемент, используя предопределенные методы JavaScript, включая метод appendChild() и метод createElement(). Вы можете добавить строку в начало конца таблицы, используя метод insertRow(), передав индексы. В этом руководстве объясняется процедура добавления новой строки в таблицу нажатием кнопки с помощью JavaScript.