Това ръководство ще използва JavaScript, за да обясни процедурата за добавяне на ред към таблица.
Как да добавите ред към HTML таблица с помощта на JavaScript?
За да добавите ред в таблица, използвайте следните процедури:
Нека проверим всяка процедура поотделно.
Метод 1: Добавете ред към HTML таблица с помощта на метода insertRow().
„ вмъкване на ред () ” се използва за добавяне на нов ред в началото на таблицата. Той създава нов
Ако възнамерявате да добавите реда в последния/края на таблицата, тогава предайте индекс „ -1 “ като аргумент.
Синтаксис
Използвайте следния синтаксис за добавяне на редове в таблица с помощта на метода insertRow():
маса. вмъкване на ред ( индекс ) ;
Тук, ' индекс ” показва позицията, където искате да добавите нов ред, като например в края на таблицата или в началото.
Пример 1: Добавяне на ред в горната/началната част на таблицата
Тук ще създадем таблица и бутон в HTML файл, използвайки HTML <таблица> и <бутон> етикети. Таблицата съдържа три реда и три колони или клетки:
< идентификатор на таблица = 'маса' >< тр >
< td > Клетка на ред 1 td >
< td > Клетка на ред 1 td >
< td > Клетка на ред 1 td >
тр >
< тр >
< td > Клетка на ред две td >
< td > Клетка на ред две td >
< td > Клетка на ред две td >
тр >
< тр >
< td > Клетка на ред 3 td >
< td > Клетка на ред 3 td >
< td > Клетка на ред 3 td >
тр >
маса >
< бр >
След това създайте бутон, който ще извика „ addRow() ” при щракване:
< тип бутон = 'бутон' onclick = 'addRow()' > Щракнете, за да добавите ред в горната част на таблицата бутон >За стилизиране на таблицата ще зададем границата на всяка клетка и таблицата, както е дадено по-долу:
маса, тд {граница : 1px плътно черно ;
}
Сега ще добавим редове в таблицата в горната част/началото на таблицата с помощта на JavaScript. За да направите това, дефинирайте функция с име ' addRow() ”, който ще бъде извикан при събитието onclick() на бутона. След това извлечете създадената таблица с помощта на „ getElementById() ” метод. След това се обадете на „ вмъкване на ред () ' чрез предаване на ' 0 ” като параметър, който показва, че редът ще бъде добавен в началото на таблицата.
След това извикайте „ вмъкване на клетка() ” чрез предаване на индекси, които показват колко клетки ще бъдат добавени към реда. Накрая добавете текстовите данни или текст в клетки, като използвате „ innerHTML ' Имот:
functionaddRow ( ) {var tableRow = документ. getElementById ( 'маса' ) ;
беше ред = tableRow. вмъкване на ред ( 0 ) ;
където клетка1 = ред. вмъкване на клетка ( 0 ) ;
където клетка2 = ред. вмъкване на клетка ( 1 ) ;
където клетка3 = ред. вмъкване на клетка ( две ) ;
клетка1. innerHTML = 'Клетка от нов ред' ;
клетка2. innerHTML = 'Клетка от нов ред' ;
клетка3. innerHTML = 'Клетка от нов ред' ;
}
Както можете да видите в изхода, новият ред се добавя в горната част на съществуващата таблица чрез щракване върху бутона:
Пример 2: Добавяне на ред в края на таблицата
Ако искате да вмъкнете ред в последния/края на таблицата, подайте „ -1 ” индекс към „ вмъкване на ред () ” метод. Той ще добави реда най-накрая, когато се щракне върху бутона:
functionaddRow ( ) {var tableRow = документ. getElementById ( 'маса' ) ;
беше ред = tableRow. вмъкване на ред ( - 1 ) ;
където клетка1 = ред. вмъкване на клетка ( 0 ) ;
където клетка2 = ред. вмъкване на клетка ( 1 ) ;
където клетка3 = ред. вмъкване на клетка ( две ) ;
клетка1. innerHTML = 'Клетка от нов ред' ;
клетка2. innerHTML = 'Клетка от нов ред' ;
клетка3. innerHTML = 'Клетка от нов ред' ;
}
Изход
Да преминем към другия метод!
Метод 2: Добавяне на ред към HTML таблица чрез създаване на нов елемент
Има друг метод за добавяне на ред в таблица, който създава нови елементи с помощта на JavaScript методи, включително „ createElement() ” метод и „ appendChild() ” метод. CreateElement() създава елементите
Синтаксис
Следвайте предоставения синтаксис, за да създадете нов елемент за добавяне на ред в таблица с помощта на JavaScript:
документ. createElement ( 'tr' ) ;Тук „ тр ” е редът на таблицата.
Пример
Сега ще използваме същата предварително създадена таблица в HTML с CSS файл, но в JavaScript файла ще използваме „ createElement() ” метод. След това добавете данните или текста в клетките, като използвате „ innerHTML ' Имот. И накрая, извикайте „ appendChild() ”, който ще добави клетките в ред и след това реда в таблица:
functionaddRow ( ) {var tableRow = документ. getElementById ( 'маса' ) ;
беше ред = документ. createElement ( 'tr' ) ;
където клетка1 = документ. createElement ( 'td' ) ;
където клетка2 = документ. createElement ( 'td' ) ;
където клетка3 = документ. createElement ( 'td' ) ;
клетка1. innerHTML = 'Клетка от нов ред' ;
клетка2. innerHTML = 'Клетка от нов ред' ;
клетка3. innerHTML = 'Клетка от нов ред' ;
ред. appendChild ( клетка1 ) ;
ред. appendChild ( клетка2 ) ;
ред. appendChild ( клетка3 ) ;
tableRow. appendChild ( ред ) ;
}
Резултатът показва, че новият ред е добавен успешно в края на таблицата:
Компилирахме всички методи за добавяне на ред в таблица с помощта на JavaScript.
Заключение
За добавяне на ред в таблица използвайте двата подхода: метод insertRow() или създайте нов елемент с помощта на предварително дефинирани методи на JavaScript, включително метода appendChild() и метода createElement(). Можете да добавите ред в началото на края на таблицата, като използвате метода insertRow(), като подадете индекси. Това ръководство обяснява процедурите за добавяне на нов ред в таблица чрез щракване върху бутон с помощта на JavaScript.