Ako pridať riadok do tabuľky HTML pomocou JavaScriptu

Niekedy sa pri vývoji webovej stránky môže vyskytnúť požiadavka na vytvorenie alebo odstránenie riadkov a buniek alebo pridanie údajov do tabuľky dynamicky pomocou JavaScriptu. JavaScript je dynamický jazyk, ktorý pomáha pri dynamickom ovládaní, získavaní prístupu a úprave komponentov HTML na strane klienta. Presnejšie povedané, môže sa použiť na pridanie riadku do tabuľky HTML.

Táto príručka bude používať JavaScript na vysvetlenie postupu pridania riadka do tabuľky.

Ako pridať riadok do tabuľky HTML pomocou JavaScriptu?

Ak chcete pridať riadok do tabuľky, použite nasledujúce postupy:

metóda insertRow().
Vytvorte nový prvok

Pozrime sa na každý postup jednotlivo.

Metóda 1: Pridanie riadka do tabuľky HTML pomocou metódy insertRow().

' insertRow() ” metóda sa používa na pridanie nového riadku na začiatok tabuľky. Vytvorí nový prvok a vloží ho do tabuľky. Index berie ako parameter, ktorý definuje umiestnenie tabuľky, kam sa pridá riadok. Ak „ 0 ” alebo v metóde nebude odovzdaný žiadny index, táto metóda pridá riadok na začiatok tabuľky.

Ak máte v úmysle pridať riadok na posledný/koniec tabuľky, zadajte index “ -1 “ ako argument.

Syntax

Na pridávanie riadkov do tabuľky pomocou metódy insertRow() použite nasledujúcu syntax:

tabuľky. insertRow ( index ) ;

Tu, ' index “ označuje pozíciu, kam chcete pridať nový riadok, napríklad na koniec tabuľky alebo na začiatok.

Príklad 1: Pridanie riadku na začiatok/začiatok tabuľky

Tu vytvoríme tabuľku a tlačidlo v súbore HTML pomocou HTML a značky. Tabuľka obsahuje tri riadky a tri stĺpce alebo bunky:

< ID tabuľky = 'stôl' >

< tr >

< td > Bunka riadku 1 td >

< td > Bunka riadku 1 td >

< td > Bunka riadku 1 td >

tr >

< tr >

< td > Bunka riadku dva td >

< td > Bunka riadku dva td >

< td > Bunka riadku dva td >

tr >

< tr >

< td > Bunka riadku 3 td >

< td > Bunka riadku 3 td >

< td > Bunka riadku 3 td >

tr >

tabuľky >

< br >

Potom vytvorte tlačidlo, ktoré vyvolá „ addRow() ” tlačidlo po kliknutí:

< typ tlačidla = 'tlačidlo' po kliknutí = 'addRow()' > Kliknutím pridáte riadok v hornej časti tabuľky tlačidlo >

Na úpravu štýlu tabuľky nastavíme orámovanie každej bunky a tabuľky, ako je uvedené nižšie:

stôl, td {

hranica : 1px plná čierna ;

}

Teraz pridáme riadky do tabuľky na začiatok/začiatok tabuľky pomocou JavaScriptu. Ak to chcete urobiť, definujte funkciu s názvom „ addRow() ”, ktorá sa zavolá pri udalosti onclick() tlačidla. Potom získajte vytvorenú tabuľku pomocou „ getElementById() “. Potom zavolajte na „ insertRow() ” metódou odovzdaním “ 0 ” index ako parameter, ktorý označuje, že riadok bude pridaný na začiatok tabuľky.

Potom vyvolajte „ insertCell() ” odovzdaním indexov, ktoré ukazujú, koľko buniek sa pridá do riadku. Nakoniec pridajte textové údaje alebo text do buniek pomocou „ innerHTML ' nehnuteľnosť:

functionaddRow ( ) {
var tableRow = dokument. getElementById ( 'stôl' ) ;
bol riadok = tableRow. insertRow ( 0 ) ;
kde bunka1 = riadok. insertCell ( 0 ) ;
kde bunka2 = riadok. insertCell ( 1 ) ;
kde bunka3 = riadok. insertCell ( dva ) ;
bunka1. innerHTML = 'Bunka nového radu' ;
bunka2. innerHTML = 'Bunka nového radu' ;
bunka3. innerHTML = 'Bunka nového radu' ;
}

Ako môžete vidieť vo výstupe, nový riadok sa pridá na začiatok existujúcej tabuľky kliknutím na tlačidlo:

Príklad 2: Pridanie riadku na koniec tabuľky

Ak chcete vložiť riadok na posledný/koniec tabuľky, prejdite „ -1 “ index k “ insertRow() “. Po kliknutí na tlačidlo sa nakoniec pridá riadok:

functionaddRow ( ) {
var tableRow = dokument. getElementById ( 'stôl' ) ;
bol riadok = tableRow. insertRow ( - 1 ) ;
kde bunka1 = riadok. insertCell ( 0 ) ;
kde bunka2 = riadok. insertCell ( 1 ) ;
kde bunka3 = riadok. insertCell ( dva ) ;
bunka1. innerHTML = 'Bunka nového radu' ;
bunka2. innerHTML = 'Bunka nového radu' ;
bunka3. innerHTML = 'Bunka nového radu' ;
}

Výkon

Prejdime na inú metódu!

Metóda 2: Pridajte riadok do tabuľky HTML vytvorením nového prvku

Existuje ďalšia metóda na pridanie riadka do tabuľky, ktorá vytvára nové prvky pomocou metód JavaScript, vrátane „ createElement() “ metóda a “ appendChild() “. CreateElement() vytvorí prvky a a metóda appendChild() pripojí bunky a riadky v tabuľke.

Syntax

Podľa poskytnutej syntaxe vytvorte nový prvok na pridanie riadka do tabuľky pomocou JavaScriptu:

dokument. createElement ( 'tr' ) ;

Tu je „ tr “ je riadok tabuľky.

Príklad

Teraz použijeme rovnakú predtým vytvorenú tabuľku v HTML so súborom CSS, ale v súbore JavaScript použijeme „ createElement() “. Potom pridajte údaje alebo text do buniek pomocou „ innerHTML ' nehnuteľnosť. Nakoniec vyvolajte „ appendChild() ” metóda, ktorá pridá bunky do riadku a potom riadok do tabuľky:

functionaddRow ( ) {
var tableRow = dokument. getElementById ( 'stôl' ) ;
bol riadok = dokument. createElement ( 'tr' ) ;
kde bunka1 = dokument. createElement ( 'td' ) ;
kde bunka2 = dokument. createElement ( 'td' ) ;
kde bunka3 = dokument. createElement ( 'td' ) ;
bunka1. innerHTML = 'Bunka nového radu' ;
bunka2. innerHTML = 'Bunka nového radu' ;
bunka3. innerHTML = 'Bunka nového radu' ;
riadok. appendChild ( bunka1 ) ;
riadok. appendChild ( bunka2 ) ;
riadok. appendChild ( bunka3 ) ;
tableRow. appendChild ( riadok ) ;
}

Výstup ukazuje, že nový riadok bol úspešne pridaný na koniec tabuľky:

Zostavili sme všetky metódy na pridávanie riadkov do tabuľky pomocou JavaScriptu.

Záver

Na pridanie riadka do tabuľky použite dva prístupy: metódu insertRow() alebo vytvorte nový prvok pomocou preddefinovaných metód JavaScript, vrátane metódy appendChild() a metódy createElement(). Pomocou metódy insertRow() môžete pridať riadok na začiatok konca tabuľky zadaním indexov. V tejto príručke sú vysvetlené postupy pridania nového riadku do tabuľky kliknutím na tlačidlo pomocou JavaScriptu.

Ako pridať riadok do tabuľky HTML pomocou JavaScriptu