Jak přidat řádek do HTML tabulky pomocí JavaScriptu

Jak Pridat Radek Do Html Tabulky Pomoci Javascriptu



Někdy se při vývoji webu může objevit požadavek na vytvoření nebo odstranění řádků a buněk nebo přidání dat do tabulky dynamicky pomocí JavaScriptu. JavaScript je dynamický jazyk, který pomáhá při dynamickém ovládání, získávání přístupu a úpravě komponent HTML na straně klienta. Přesněji řečeno, lze jej použít k přidání řádku do tabulky HTML.

Tato příručka bude používat JavaScript k vysvětlení postupu pro přidání řádku do tabulky.

Jak přidat řádek do tabulky HTML pomocí JavaScriptu?

Chcete-li přidat řádek do tabulky, použijte následující postupy:







Zkontrolujme každý postup jednotlivě.



Metoda 1: Přidání řádku do tabulky HTML pomocí metody insertRow().

' insertRow() ” metoda se používá k přidání nového řádku na začátek tabulky. Vytvoří nový prvek a vloží jej do tabulky. Přebírá index jako parametr, který definuje umístění tabulky, kam bude přidán řádek. Pokud „ 0 ” nebo v metodě nebude předán žádný index, tato metoda přidá řádek na začátek tabulky.



Pokud máte v úmyslu přidat řádek na poslední/konec tabulky, předejte index “ -1 “ jako argument.





Syntax

Pro přidávání řádků do tabulky pomocí metody insertRow() použijte následující syntaxi:



stůl. insertRow ( index ) ;

Tady, ' index “ označuje pozici, kam chcete přidat nový řádek, například na konec tabulky nebo na začátek.

Příklad 1: Přidání řádku na začátek/začátek tabulky

Zde vytvoříme tabulku a tlačítko v souboru HTML pomocí HTML a značky. Tabulka obsahuje tři řádky a tři sloupce nebo buňky:

< ID tabulky = 'stůl' >

< tr >

< td > Buňka řady 1 td >

< td > Buňka řady 1 td >

< td > Buňka řady 1 td >

tr >

< tr >

< td > Buňka řady dva td >

< td > Buňka řady dva td >

< td > Buňka řady dva td >

tr >

< tr >

< td > Buňka řady 3 td >

< td > Buňka řady 3 td >

< td > Buňka řady 3 td >

tr >

stůl >

< br >

Poté vytvořte tlačítko, které vyvolá „ addRow() ” tlačítko po kliknutí:

< typ tlačítka = 'knoflík' při kliknutí = 'addRow()' > Kliknutím přidáte řádek v horní části tabulky knoflík >

Pro stylování tabulky nastavíme ohraničení každé buňky a tabulky, jak je uvedeno níže:

stůl, td {

okraj : 1px plná černá ;

}

Nyní přidáme řádky do tabulky na začátek/začátek tabulky pomocí JavaScriptu. Chcete-li tak učinit, definujte funkci s názvem „ addRow() ”, která bude volána při události onclick() tlačítka. Poté načtěte vytvořenou tabulku pomocí „ getElementById() “ metoda. Poté zavolejte na „ insertRow() “ metodou předáním “ 0 ” index jako parametr, který označuje, že řádek bude přidán na začátek tabulky.

Poté vyvolejte „ insertCell() ” předáním indexů, které ukazují, kolik buněk bude přidáno do řádku. Nakonec přidejte textová data nebo text do buněk pomocí „ vnitřní HTML ' vlastnictví:

functionaddRow ( ) {
var tableRow = dokument. getElementById ( 'stůl' ) ;
byla řada = tableRow. insertRow ( 0 ) ;
kde buňka1 = řádek. insertCell ( 0 ) ;
kde buňka2 = řádek. insertCell ( 1 ) ;
kde buňka3 = řádek. insertCell ( dva ) ;
buňka1. vnitřní HTML = 'Buňka nové řady' ;
buňka2. vnitřní HTML = 'Buňka nové řady' ;
buňka3. vnitřní HTML = 'Buňka nové řady' ;
}

Jak můžete vidět na výstupu, nový řádek se přidá na začátek stávající tabulky kliknutím na tlačítko:

Příklad 2: Přidání řádku na konec tabulky

Pokud chcete vložit řádek na poslední/konec tabulky, předejte „ -1 “ index k “ insertRow() “ metoda. Po kliknutí na tlačítko se konečně přidá řádek:

functionaddRow ( ) {
var tableRow = dokument. getElementById ( 'stůl' ) ;
byla řada = tableRow. insertRow ( - 1 ) ;
kde buňka1 = řádek. insertCell ( 0 ) ;
kde buňka2 = řádek. insertCell ( 1 ) ;
kde buňka3 = řádek. insertCell ( dva ) ;
buňka1. vnitřní HTML = 'Buňka nové řady' ;
buňka2. vnitřní HTML = 'Buňka nové řady' ;
buňka3. vnitřní HTML = 'Buňka nové řady' ;
}

Výstup

Pojďme na jiný způsob!

Metoda 2: Přidání řádku do tabulky HTML vytvořením nového prvku

Existuje další metoda pro přidání řádku do tabulky, která vytváří nové prvky pomocí metod JavaScriptu, včetně „ createElement() “ metoda a “ appendChild() “ metoda. CreateElement() vytvoří prvky a a metoda appendChild() připojí buňky a řádky v tabulce.

Syntax

Chcete-li vytvořit nový prvek pro přidání řádku do tabulky pomocí JavaScriptu, postupujte podle uvedené syntaxe:

dokument. createElement ( 'tr' ) ;

Zde, „ tr “ je řádek tabulky.

Příklad

Nyní použijeme stejnou dříve vytvořenou tabulku v HTML se souborem CSS, ale v souboru JavaScript použijeme „ createElement() “ metoda. Poté přidejte data nebo text do buněk pomocí „ vnitřní HTML ' vlastnictví. Nakonec vyvolejte „ appendChild() ” metoda, která přidá buňky do řádku a poté řádek do tabulky:

functionaddRow ( ) {
var tableRow = dokument. getElementById ( 'stůl' ) ;
byla řada = dokument. createElement ( 'tr' ) ;
kde buňka1 = dokument. createElement ( 'td' ) ;
kde buňka2 = dokument. createElement ( 'td' ) ;
kde buňka3 = dokument. createElement ( 'td' ) ;
buňka1. vnitřní HTML = 'Buňka nové řady' ;
buňka2. vnitřní HTML = 'Buňka nové řady' ;
buňka3. vnitřní HTML = 'Buňka nové řady' ;
řádek. appendChild ( buňka1 ) ;
řádek. appendChild ( buňka2 ) ;
řádek. appendChild ( buňka3 ) ;
tableRow. appendChild ( řádek ) ;
}

Výstup ukazuje, že nový řádek byl úspěšně přidán na konec tabulky:

Sestavili jsme všechny metody pro přidání řádku do tabulky pomocí JavaScriptu.

Závěr

Chcete-li přidat řádek do tabulky, použijte dva přístupy: metodu insertRow() nebo vytvořte nový prvek pomocí předdefinovaných metod JavaScriptu, včetně metody appendChild() a metody createElement(). Řádek na začátek konce tabulky můžete přidat pomocí metody insertRow() předáním indexů. Tato příručka vysvětluje postupy pro přidání nového řádku do tabulky kliknutím na tlačítko pomocí JavaScriptu.