In diesem Handbuch wird JavaScript verwendet, um das Verfahren zum Hinzufügen einer Zeile zu einer Tabelle zu erklären.
Wie füge ich mit JavaScript eine Zeile zu einer HTML-Tabelle hinzu?
Verwenden Sie zum Hinzufügen einer Zeile in einer Tabelle die folgenden Verfahren:
Lassen Sie uns jeden Vorgang einzeln überprüfen.
Methode 1: Fügen Sie eine Zeile zur HTML-Tabelle hinzu, indem Sie die Methode insertRow() verwenden
Das ' EinfügenZeile() ”-Methode wird verwendet, um eine neue Zeile am Anfang der Tabelle hinzuzufügen. Es erstellt ein neues
Wenn Sie beabsichtigen, die Zeile am letzten/Ende der Tabelle hinzuzufügen, übergeben Sie den Index „ -1 “ als Argument.
Syntax
Verwenden Sie die folgende Syntax zum Hinzufügen von Zeilen in einer Tabelle mit Hilfe der Methode insertRow():
Tisch. Zeile einfügen ( Index ) ;
Hier, ' Index “ gibt die Position an, an der Sie eine neue Zeile hinzufügen möchten, z. B. am Ende der Tabelle oder am Anfang.
Beispiel 1: Hinzufügen einer Zeile oben/am Anfang der Tabelle
Hier erstellen wir mithilfe von HTML eine Tabelle und eine Schaltfläche in einer HTML-Datei
< tr >
< td > Zelle der Zeile 1 td >
< td > Zelle der Zeile 1 td >
< td > Zelle der Zeile 1 td >
tr >
< tr >
< td > Zelle der Zeile zwei td >
< td > Zelle der Zeile zwei td >
< td > Zelle der Zeile zwei td >
tr >
< tr >
< td > Zelle der Reihe 3 td >
< td > Zelle der Reihe 3 td >
< td > Zelle der Reihe 3 td >
tr >
Tisch >
< Br >
Erstellen Sie dann eine Schaltfläche, die das „ Zeile hinzufügen() ” Schaltfläche beim Anklicken:
< Schaltflächentyp = 'Taste' anklicken = 'Zeile hinzufügen()' > Klicken Sie, um eine Zeile oben in der Tabelle hinzuzufügen Taste >Um die Tabelle zu gestalten, legen wir den Rahmen jeder Zelle und der Tabelle wie unten angegeben fest:
Tisch, td {Grenze : 1px durchgehend schwarz ;
}
Jetzt fügen wir mithilfe von JavaScript Zeilen in der Tabelle oben/am Anfang der Tabelle hinzu. Definieren Sie dazu eine Funktion namens „ Zeile hinzufügen() “, die beim onclick()-Ereignis der Schaltfläche aufgerufen wird. Rufen Sie dann die erstellte Tabelle mit dem „ getElementById() ' Methode. Rufen Sie danach „ EinfügenZeile() “-Methode durch Übergeben der „ 0 ” index als Parameter, der angibt, dass die Zeile am Anfang der Tabelle hinzugefügt wird.
Rufen Sie dann das „ Zelle einfügen () ”-Methode, indem Indizes übergeben werden, die anzeigen, wie viele Zellen der Zeile hinzugefügt werden. Fügen Sie schließlich die Textdaten oder den Text in Zellen mit ' innerHTML ' Eigentum:
functionaddRow ( ) {var Tabellenzeile = dokumentieren. getElementById ( 'Tisch' ) ;
war Reihe = Tischreihe. Zeile einfügen ( 0 ) ;
wo Zelle1 = die Zeile. EinfügenZelle ( 0 ) ;
wo Zelle2 = die Zeile. EinfügenZelle ( 1 ) ;
wo Zelle3 = die Zeile. EinfügenZelle ( zwei ) ;
Zelle1. innerHTML = 'Zelle der neuen Reihe' ;
Zelle2. innerHTML = 'Zelle der neuen Reihe' ;
Zelle3. innerHTML = 'Zelle der neuen Reihe' ;
}
Wie Sie in der Ausgabe sehen können, wird die neue Zeile oben in der vorhandenen Tabelle hinzugefügt, indem Sie auf die Schaltfläche klicken:
Beispiel 2: Hinzufügen einer Zeile am Ende der Tabelle
Wenn Sie eine Zeile am letzten/Ende der Tabelle einfügen möchten, übergeben Sie das „ -1 ” Index zum “ EinfügenZeile() ' Methode. Die Zeile wird zuletzt hinzugefügt, wenn auf die Schaltfläche geklickt wird:
functionaddRow ( ) {var Tabellenzeile = dokumentieren. getElementById ( 'Tisch' ) ;
war Reihe = Tischreihe. Zeile einfügen ( - 1 ) ;
wo Zelle1 = die Zeile. EinfügenZelle ( 0 ) ;
wo Zelle2 = die Zeile. EinfügenZelle ( 1 ) ;
wo Zelle3 = die Zeile. EinfügenZelle ( zwei ) ;
Zelle1. innerHTML = 'Zelle der neuen Reihe' ;
Zelle2. innerHTML = 'Zelle der neuen Reihe' ;
Zelle3. innerHTML = 'Zelle der neuen Reihe' ;
}
Ausgabe
Kommen wir zur anderen Methode!
Methode 2: Fügen Sie eine Zeile zur HTML-Tabelle hinzu, indem Sie ein neues Element erstellen
Es gibt eine andere Methode zum Hinzufügen einer Zeile in einer Tabelle, die neue Elemente mit JavaScript-Methoden erstellt, einschließlich der „ createElement() “ Methode und die „ appendChild() ' Methode. Die Methode createElement() erstellt die Elemente
Syntax
Befolgen Sie die bereitgestellte Syntax, um ein neues Element zum Hinzufügen einer Zeile in einer Tabelle mit JavaScript zu erstellen:
dokumentieren. createElement ( 'tr' ) ;Hier die ' tr “ ist die Tabellenzeile.
Beispiel
Wir werden jetzt dieselbe zuvor erstellte Tabelle in HTML mit einer CSS-Datei verwenden, aber in der JavaScript-Datei verwenden wir das „ createElement() ' Methode. Fügen Sie dann die Daten oder den Text in den Zellen mit dem „ innerHTML ' Eigentum. Rufen Sie zuletzt das „ appendChild() ”-Methode, die die Zellen in einer Zeile und dann die Zeile in einer Tabelle hinzufügt:
functionaddRow ( ) {var Tabellenzeile = dokumentieren. getElementById ( 'Tisch' ) ;
war Reihe = dokumentieren. createElement ( 'tr' ) ;
wo Zelle1 = dokumentieren. createElement ( 'td' ) ;
wo Zelle2 = dokumentieren. createElement ( 'td' ) ;
wo Zelle3 = dokumentieren. createElement ( 'td' ) ;
Zelle1. innerHTML = 'Zelle der neuen Reihe' ;
Zelle2. innerHTML = 'Zelle der neuen Reihe' ;
Zelle3. innerHTML = 'Zelle der neuen Reihe' ;
die Zeile. Kind anhängen ( Zelle1 ) ;
die Zeile. Kind anhängen ( Zelle2 ) ;
die Zeile. Kind anhängen ( Zelle3 ) ;
Tischreihe. Kind anhängen ( die Zeile ) ;
}
Die Ausgabe zeigt, dass die neue Zeile erfolgreich am Ende der Tabelle hinzugefügt wurde:
Wir haben alle Methoden zum Hinzufügen einer Zeile in einer Tabelle mit JavaScript zusammengestellt.
Fazit
Verwenden Sie zum Hinzufügen einer Zeile in einer Tabelle die beiden Ansätze: die insertRow()-Methode oder erstellen Sie ein neues Element mit vordefinierten JavaScript-Methoden, einschließlich der appendChild()-Methode und der createElement()-Methode. Sie können eine Zeile am Anfang oder Ende der Tabelle hinzufügen, indem Sie die Methode insertRow() verwenden, indem Sie Indizes übergeben. Dieses Handbuch erläutert die Verfahren zum Hinzufügen einer neuen Zeile in einer Tabelle durch Klicken auf eine Schaltfläche mit JavaScript.