Jak dodać wiersz do tabeli HTML za pomocą JavaScript

Czasami podczas opracowywania strony internetowej może istnieć wymaganie tworzenia lub usuwania wierszy i komórek lub dodawania danych w tabeli dynamicznie za pomocą JavaScript. JavaScript to dynamiczny język, który pomaga dynamicznie kontrolować, uzyskiwać dostęp i modyfikując komponenty HTML po stronie klienta. Mówiąc dokładniej, można go wykorzystać do dodania wiersza do tabeli HTML.

Niniejszy podręcznik użyje JavaScript do wyjaśnienia procedury dodawania wiersza do tabeli.

Jak dodać wiersz do tabeli HTML za pomocą JavaScript?

Aby dodać wiersz w tabeli, użyj następujących procedur:

• metoda insertrow ()
• Utwórz nowy element

Sprawdźmy każdą procedurę indywidualnie.

Metoda 1: Dodaj wiersz do tabeli HTML za pomocą metody insertrow ()

„„insertrow ()„Metoda jest wykorzystywana do dodania nowego wiersza na początku tabeli. Tworzy nowy element i wkłada go do tabeli. Bierze indeks jako parametr, który określa lokalizację tabeli, w której zostanie dodany wiersz. Jeśli "0”Lub żaden indeks nie zostanie przekazany metodą, ta metoda dodaje wiersz na początku tabeli.

Jeśli zamierzasz dodać wiersz na ostatnim/końcu tabeli, przejdź indeks „-1„Jako argument.

Składnia

Użyj następującej składni do dodawania wierszy w tabeli za pomocą metody insertrow ():

tabela.insertrow (indeks);

Tutaj, "indeks”Wskazuje pozycję, w której chcesz dodać nowy wiersz, na przykład na końcu tabeli lub na początku.

Przykład 1: Dodanie wiersza u góry/początku tabeli

Tutaj utworzymy tabelę i przycisk w pliku HTML za pomocą HTML

I tagi. Tabela zawiera trzy rzędy i trzy kolumny lub komórki:

Komórka rzędu 1	Komórka rzędu 1	Komórka rzędu 1
Komórka rzędu 2	Komórka rzędu 2	Komórka rzędu 2
Komórka rzędu 3	Komórka rzędu 3	Komórka rzędu 3

Następnie utwórz przycisk, który wywoła „addrow ()”Przycisk po kliknięciu:

Kliknij, aby dodać wiersz u góry tabeli

W celu stylizacji tabeli ustawimy granicę każdej komórki i tabelę, jak podano poniżej:

Tabela, td
granica: 1px Solid Black;

Teraz dodamy wiersze w tabeli u góry/początek tabeli za pomocą JavaScript. Aby to zrobić, zdefiniuj funkcję o nazwie „addrow ()„To zostanie wywołane na wydarzeniu OnClick () Button's. Następnie pobieraj utworzoną tabelę za pomocą „getElementById ()" metoda. Następnie zadzwoń do „insertrow ()„Metoda, przekazując„0”Indeks jako parametr wskazujący, że wiersz zostanie dodany na początku tabeli.

Następnie przywołaj „„insertCell ()”Metoda, przekazując indeksy, które pokazują, ile komórek zostanie dodanych do rzędu. Na koniec dodaj dane lub tekst w komórkach za pomocą „InnerHtml" nieruchomość:

funkcjaaddrow ()
var tablerow = dokument.getElementById („Tabela”);
var row = tablerow.insertrow (0);
var komórka1 = wiersz.InsertCell (0);
var komórka 2 = wiersz.InsertCell (1);
var Cell3 = wiersz.InsertCell (2);
komórka 1.innerHtml = „komórka nowego wiersza”;
komórka 2.innerHtml = „komórka nowego wiersza”;
komórka3.innerHtml = „komórka nowego wiersza”;

Jak widać na wyjściu, nowy wiersz jest dodawany u góry istniejącej tabeli, klikając przycisk:

Przykład 2: Dodanie wiersza na końcu tabeli

Jeśli chcesz wstawić wiersz na ostatnie/koniec stołu, przejdź przez „-1”Indeks do„insertrow ()" metoda. W końcu doda wiersz, gdy przycisk zostanie kliknięty:

funkcjaaddrow ()
var tablerow = dokument.getElementById („Tabela”);
var row = tablerow.insertrow (-1);
var komórka1 = wiersz.InsertCell (0);
var komórka 2 = wiersz.InsertCell (1);
var Cell3 = wiersz.InsertCell (2);
komórka 1.innerHtml = „komórka nowego wiersza”;
komórka 2.innerHtml = „komórka nowego wiersza”;
komórka3.innerHtml = „komórka nowego wiersza”;

Wyjście

Przejdźmy do drugiej metody!

Metoda 2: Dodaj wiersz do tabeli HTML, tworząc nowy element

Istnieje inna metoda dodawania wiersza w tabeli, która tworzy nowe elementy przy użyciu metod JavaScript, w tym „createElement ()”Metoda i„appendChild ()" metoda. CreateElement () tworzy I Elementy i metoda appendChild () dołącza komórki i wiersze w tabeli.

Składnia

Postępuj zgodnie z podaną składnią, aby utworzyć nowy element do dodania wiersza w tabeli za pomocą JavaScript:

dokument.CreateElement („Tr”);

Tutaj "tr”To wiersz stołu.

Przykład

Teraz użyjemy tej samej, wcześniej utworzonej tabeli w HTML z plikiem CSS, ale w pliku JavaScript będziemy używać „createElement ()" metoda. Następnie dodaj dane lub tekst w komórkach za pomocą „InnerHtml" nieruchomość. Wreszcie, przywołaj „appendChild ()„Metoda, która doda komórki w rzędzie, a następnie wiersz w tabeli:

funkcjaaddrow ()
var tablerow = dokument.getElementById („Tabela”);
var row = dokument.CreateElement („Tr”);
var cell1 = dokument.createElement („td”);
var cell2 = dokument.createElement („td”);
var cell3 = dokument.createElement („td”);
komórka 1.innerHtml = „komórka nowego wiersza”;
komórka 2.innerHtml = „komórka nowego wiersza”;
komórka3.innerHtml = „komórka nowego wiersza”;
wiersz.appendchild (komórka 1);
wiersz.appendchild (komórka 2);
wiersz.appendchild (komórka3);
Tablerow.appendChild (wiersz);

Wyjście pokazuje, że nowy wiersz jest pomyślnie dodany na końcu tabeli:

Skompilowaliśmy wszystkie metody dodawania wiersza w tabeli za pomocą JavaScript.

Wniosek

Aby dodać wiersz w tabeli, użyj dwóch podejść: metoda insertrow () lub utwórz nowy element za pomocą predefiniowanych metod JavaScript, w tym metody appendChild () i metodę createElement (). Możesz dodać wiersz na początku końca tabeli za pomocą metody insertrow (), przekazując indeksy. Ten podręcznik wyjaśnił procedury dodawania nowego wiersza w tabeli, klikając przycisk za pomocą JavaScript.