Ten podręcznik użyje JavaScript, aby wyjaśnić procedurę dodawania wiersza do tabeli.
Jak dodać wiersz do tabeli HTML za pomocą JavaScript?
Aby dodać wiersz w tabeli, użyj następujących procedur:
Sprawdźmy każdy zabieg indywidualnie.
Metoda 1: Dodaj wiersz do tabeli HTML za pomocą metody insertRow()
„ wstaw wiersz() Metoda ” służy do dodania nowego wiersza na początku tabeli. Tworzy nowy element
Jeśli zamierzasz dodać wiersz na końcu/końcu tabeli, przekaż indeks „ -1 ” jako argument.
Składnia
Użyj następującej składni do dodawania wierszy w tabeli za pomocą metody insertRow():
stół. wstaw wiersz ( 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: Dodawanie wiersza na górze/początku tabeli
Tutaj utworzymy tabelę i przycisk w pliku HTML za pomocą HTML
< tr >
< td > Komórka rzędu 1 td >
< td > Komórka rzędu 1 td >
< td > Komórka rzędu 1 td >
tr >
< tr >
< td > Komórka rzędu dwa td >
< td > Komórka rzędu dwa td >
< td > Komórka rzędu dwa td >
tr >
< tr >
< td > Komórka rzędu 3 td >
< td > Komórka rzędu 3 td >
< td > Komórka rzędu 3 td >
tr >
stół >
< br >
Następnie utwórz przycisk, który wywoła „ dodaj wiersz() ” po kliknięciu:
< typ przycisku = 'przycisk' na kliknięcie = 'dodaj wiersz()' > Kliknij, aby dodać wiersz na górze tabeli przycisk >Do stylizacji tabeli ustawimy obramowanie każdej komórki i tabeli, jak podano poniżej:
stół, td {granica : 1px jednolita czerń ;
}
Teraz dodamy wiersze w tabeli na górze/na początku tabeli za pomocą JavaScript. Aby to zrobić, zdefiniuj funkcję o nazwie „ dodaj wiersz() ”, który zostanie wywołany w zdarzeniu onclick() przycisku. Następnie pobierz utworzoną tabelę za pomocą „ pobierzElementById() ' metoda. Następnie zadzwoń do „ wstaw wiersz() ” metodą przekazując „ 0 ” jako parametr wskazujący, że wiersz zostanie dodany na początku tabeli.
Następnie wywołaj „ wstawKomórkę() ”, przekazując indeksy, które pokazują, ile komórek zostanie dodanych do wiersza. Na koniec dodaj dane tekstowe lub tekst w komórkach, używając „ wewnętrznyHTML ' własność:
FunctionaddRow ( ) {var tableRow = dokument. getElementById ( 'stół' ) ;
był wiersz = tabelaWiersz. wstaw wiersz ( 0 ) ;
gdzie komórka1 = wiersz. wstawKomórkę ( 0 ) ;
gdzie komórka2 = wiersz. wstawKomórkę ( 1 ) ;
gdzie komórka3 = wiersz. wstawKomórkę ( dwa ) ;
komórka1. wewnętrznyHTML = „Komórka nowego rzędu” ;
komórka2. wewnętrznyHTML = „Komórka nowego rzędu” ;
komórka3. wewnętrznyHTML = „Komórka nowego rzędu” ;
}
Jak widać na wyjściu, nowy wiersz jest dodawany na górze istniejącej tabeli, klikając przycisk:
Przykład 2: Dodawanie wiersza na końcu tabeli
Jeśli chcesz wstawić wiersz na końcu/końcu tabeli, przekaż „ -1 ” indeks do „ wstaw wiersz() ' metoda. W końcu doda wiersz po kliknięciu przycisku:
FunctionaddRow ( ) {var tableRow = dokument. getElementById ( 'stół' ) ;
był wiersz = tabelaWiersz. wstaw wiersz ( - 1 ) ;
gdzie komórka1 = wiersz. wstawKomórkę ( 0 ) ;
gdzie komórka2 = wiersz. wstawKomórkę ( 1 ) ;
gdzie komórka3 = wiersz. wstawKomórkę ( dwa ) ;
komórka1. wewnętrznyHTML = „Komórka nowego rzędu” ;
komórka2. wewnętrznyHTML = „Komórka nowego rzędu” ;
komórka3. wewnętrznyHTML = „Komórka nowego rzędu” ;
}
Wyjście
Przejdźmy do innej metody!
Metoda 2: Dodaj wiersz do tabeli HTML, tworząc nowy element
Istnieje inna metoda dodawania wiersza w tabeli, polegająca na tworzeniu nowych elementów za pomocą metod JavaScript, w tym „ utwórzElement() ” metoda i „ dołączDziecko() ' metoda. Metoda createElement() tworzy elementy
Składnia
Postępuj zgodnie z podaną składnią, aby utworzyć nowy element do dodania wiersza w tabeli za pomocą JavaScript:
dokument. utwórz element ( „tr” ) ;Tutaj ' tr ” to wiersz tabeli.
Przykład
Będziemy teraz używać tej samej, wcześniej utworzonej tabeli w HTML z plikiem CSS, ale w pliku JavaScript użyjemy „ utwórzElement() ' metoda. Następnie dodaj dane lub tekst w komórkach, używając „ wewnętrznyHTML ' własność. Na koniec wywołaj „ dołączDziecko() ” metoda, która doda komórki w wierszu, a następnie wiersz w tabeli:
FunctionaddRow ( ) {var tableRow = dokument. getElementById ( 'stół' ) ;
był wiersz = dokument. utwórz element ( „tr” ) ;
gdzie komórka1 = dokument. utwórz element ( „td” ) ;
gdzie komórka2 = dokument. utwórz element ( „td” ) ;
gdzie komórka3 = dokument. utwórz element ( „td” ) ;
komórka1. wewnętrznyHTML = „Komórka nowego rzędu” ;
komórka2. wewnętrznyHTML = „Komórka nowego rzędu” ;
komórka3. wewnętrznyHTML = „Komórka nowego rzędu” ;
wiersz. dołączDziecko ( komórka1 ) ;
wiersz. dołączDziecko ( komórka2 ) ;
wiersz. dołączDziecko ( komórka3 ) ;
tabelaWiersz. dołączDziecko ( wiersz ) ;
}
Dane wyjściowe pokazują, że nowy wiersz został 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ść: metody insertRow() lub utwórz nowy element za pomocą predefiniowanych metod JavaScript, w tym metody appendChild() i metody createElement(). Możesz dodać wiersz na początku i końcu tabeli za pomocą metody insertRow(), przekazując indeksy. Ten podręcznik wyjaśnia procedury dodawania nowego wiersza w tabeli poprzez kliknięcie przycisku za pomocą JavaScript.