Kā pievienot rindu HTML tabulai, izmantojot JavaScript

Dažreiz, izstrādājot vietni, var būt nepieciešams izveidot vai noņemt rindas un šūnas vai pievienot datus tabulā dinamiski, izmantojot JavaScript. JavaScript ir dinamiska valoda, kas palīdz dinamiski kontrolēt, piekļūt un modificēt HTML komponentus klienta pusē. Precīzāk, to var izmantot, lai HTML tabulai pievienotu rindu.

Šajā rokasgrāmatā tiks izmantots JavaScript, lai izskaidrotu rindas pievienošanas tabulai procedūru.

Kā pievienot rindu HTML tabulai, izmantojot JavaScript?

Lai tabulai pievienotu rindu, izmantojiet šādas procedūras:

insertRow() metode
Izveidojiet jaunu elementu

Pārbaudīsim katru procedūru atsevišķi.

1. metode: pievienojiet rindu HTML tabulai, izmantojot metodi insertRow().

' insertRow() ” metode tiek izmantota, lai tabulas sākumā pievienotu jaunu rindu. Tas izveido jaunu elementu un ievieto to tabulā. Tas izmanto indeksu kā parametru, kas nosaka tabulas atrašanās vietu, kur tiks pievienota rinda. Ja ' 0 ” vai metodē netiks nodots rādītājs, šī metode pievieno rindu tabulas sākumā.

Ja plānojat pievienot rindu tabulas beigās/beigās, nododiet indeksu ' -1 ” kā argumentu.

Sintakse

Lai pievienotu tabulas rindas, izmantojot metodi insertRow(), izmantojiet šādu sintaksi:

tabula. ievietotRindu ( rādītājs ) ;

Šeit, ' rādītājs ” norāda vietu, kur vēlaties pievienot jaunu rindu, piemēram, tabulas beigās vai sākumā.

1. piemērs: rindas pievienošana tabulas augšpusē/sākumā

Šeit mēs izveidosim tabulu un pogu HTML failā, izmantojot HTML un tagus. Tabulā ir trīs rindas un trīs kolonnas vai šūnas:

< tabulas id = 'tabula' >

< tr >

< td > Rindas šūna 1 td >

< td > Rindas šūna 1 td >

< td > Rindas šūna 1 td >

tr >

< tr >

< td > Rindas šūna divi td >

< td > Rindas šūna divi td >

< td > Rindas šūna divi td >

tr >

< tr >

< td > Rindas šūna 3 td >

< td > Rindas šūna 3 td >

< td > Rindas šūna 3 td >

tr >

tabula >

< br >

Pēc tam izveidojiet pogu, kas izsauks ' addRow() ” pogu, noklikšķinot:

< pogas veids = 'poga' onclick = 'addRow()' > Noklikšķiniet, lai pievienotu rindu tabulas augšdaļā pogu >

Lai veidotu tabulas stilu, mēs iestatīsim katras šūnas un tabulas apmali, kā norādīts tālāk:

galds, td {

robeža : 1 px viendabīgi melns ;

}

Tagad mēs pievienosim rindas tabulā tabulas augšpusē/sākumā, izmantojot JavaScript. Lai to izdarītu, definējiet funkciju ar nosaukumu ' addRow() ”, kas tiks izsaukts pogas onclick() notikumā. Pēc tam iegūstiet izveidoto tabulu, izmantojot ' getElementById() ” metode. Pēc tam zvaniet uz ' insertRow() ' metodi, nododot ' 0 ” indekss kā parametrs, kas norāda, ka rinda tiks pievienota tabulas sākumā.

Pēc tam izsauciet ' insertCell() ” metodi, nododot indeksus, kas parāda, cik šūnu rindai tiks pievienotas. Visbeidzot pievienojiet teksta datus vai tekstu šūnās, izmantojot ' innerHTML ” īpašums:

functionaddRow ( ) {
var tabulaRinda = dokumentu. getElementById ( 'tabula' ) ;
bija rinda = tabulaRinda. ievietotRindu ( 0 ) ;
kur šūna1 = rinda. ievietotCell ( 0 ) ;
kur šūna2 = rinda. ievietotCell ( 1 ) ;
kur šūna3 = rinda. ievietotCell ( divi ) ;
šūna1. innerHTML = 'Jaunās rindas šūna' ;
šūna2. innerHTML = 'Jaunās rindas šūna' ;
šūna3. innerHTML = 'Jaunās rindas šūna' ;
}

Kā redzat izvadā, jaunā rinda tiek pievienota esošās tabulas augšpusē, noklikšķinot uz pogas:

2. piemērs: rindas pievienošana tabulas beigās

Ja vēlaties ievietot rindu tabulas beigās/beigās, nododiet ' -1 ' indekss uz ' insertRow() ” metode. Noklikšķinot uz pogas, tā beidzot pievienos rindu:

functionaddRow ( ) {
var tabulaRinda = dokumentu. getElementById ( 'tabula' ) ;
bija rinda = tabulaRinda. ievietotRindu ( - 1 ) ;
kur šūna1 = rinda. ievietotCell ( 0 ) ;
kur šūna2 = rinda. ievietotCell ( 1 ) ;
kur šūna3 = rinda. ievietotCell ( divi ) ;
šūna1. innerHTML = 'Jaunās rindas šūna' ;
šūna2. innerHTML = 'Jaunās rindas šūna' ;
šūna3. innerHTML = 'Jaunās rindas šūna' ;
}

Izvade

Pārejam pie citas metodes!

2. metode: pievienojiet rindu HTML tabulai, izveidojot jaunu elementu

Ir vēl viena metode rindas pievienošanai tabulai, kurā tiek izveidoti jauni elementi, izmantojot JavaScript metodes, tostarp “ CreateElement() ' metode un ' appendChild() ” metode. CreateElement() izveido un elementus, un appendChild() metode pievieno tabulas šūnas un rindas.

Sintakse

Izpildiet sniegto sintakse, lai izveidotu jaunu elementu rindas pievienošanai tabulai, izmantojot JavaScript:

dokumentu. izveidotElement ( 'tr' ) ;

Šeit “ tr ” ir tabulas rinda.

Piemērs

Tagad mēs izmantosim to pašu iepriekš izveidoto tabulu HTML valodā ar CSS failu, bet JavaScript failā mēs izmantosim ' CreateElement() ” metode. Pēc tam pievienojiet datus vai tekstu šūnās, izmantojot ' innerHTML ” īpašums. Visbeidzot, izsauciet ' appendChild() ” metode, kas pievienos šūnas rindā un pēc tam tabulas rindu:

functionaddRow ( ) {
var tabulaRinda = dokumentu. getElementById ( 'tabula' ) ;
bija rinda = dokumentu. izveidotElement ( 'tr' ) ;
kur šūna1 = dokumentu. izveidotElement ( 'td' ) ;
kur šūna2 = dokumentu. izveidotElement ( 'td' ) ;
kur šūna3 = dokumentu. izveidotElement ( 'td' ) ;
šūna1. innerHTML = 'Jaunās rindas šūna' ;
šūna2. innerHTML = 'Jaunās rindas šūna' ;
šūna3. innerHTML = 'Jaunās rindas šūna' ;
rinda. pievienotBērns ( šūna1 ) ;
rinda. pievienotBērns ( šūna2 ) ;
rinda. pievienotBērns ( šūna3 ) ;
tabulaRinda. pievienotBērns ( rinda ) ;
}

Izvade parāda, ka jaunā rinda ir veiksmīgi pievienota tabulas beigās:

Mēs esam apkopojuši visas metodes rindas pievienošanai tabulā, izmantojot JavaScript.

Secinājums

Lai tabulai pievienotu rindu, izmantojiet divas pieejas: metodi insertRow() vai izveidojiet jaunu elementu, izmantojot JavaScript iepriekš definētas metodes, tostarp metodi appendChild() un metodi createElement(). Varat pievienot rindu tabulas beigās, izmantojot metodi insertRow(), nododot indeksus. Šajā rokasgrāmatā ir izskaidrotas procedūras jaunas rindas pievienošanai tabulā, noklikšķinot uz pogas, izmantojot JavaScript.

Kā pievienot rindu HTML tabulai, izmantojot JavaScript