So fügen Sie mit JavaScript Zeile zur HTML -Tabelle hinzu

Bei der Entwicklung einer Website kann manchmal Zeilen und Zellen erstellt oder entfernen oder Daten in einer Tabelle mit JavaScript dynamisch hinzugefügt werden. JavaScript ist eine dynamische Sprache, die hilft, HTML -Komponenten auf der Client -Seite dynamisch zu steuern, Zugriff auf und zu ändern. Insbesondere kann es verwendet werden, um einer HTML -Tabelle eine Zeile hinzuzufügen.

In diesem Handbuch wird JavaScript verwendet, um das Verfahren zum Hinzufügen einer Zeile zu einer Tabelle zu erläutern.

So fügen Sie mit JavaScript Zeile zur HTML -Tabelle hinzu?

Verwenden Sie zum Hinzufügen einer Zeile in einer Tabelle die folgenden Verfahren:

• Insertrow () -Methode
• Erstellen Sie ein neues Element

Lassen Sie uns jede Prozedur einzeln überprüfen.

Methode 1: Zeile zur HTML -Tabelle mit der Insertrow () -Methode hinzufügen

Der "Insertrow ()Die Methode wird verwendet, um zu Beginn der Tabelle eine neue Zeile hinzuzufügen. Es schafft eine neue Element und fügt es in die Tabelle ein. Es nimmt einen Index als Parameter vor, der den Speicherort der Tabelle definiert, in der eine Zeile hinzugefügt wird. Wenn "0Oder kein Index wird in einer Methode übergeben. Diese Methode fügt die Zeile zu Beginn der Tabelle hinzu.

Wenn Sie beabsichtigen, die Zeile am letzten/am Ende der Tabelle hinzuzufügen, geben Sie den Index vorbei “-1Als Argumentation.

Syntax

Verwenden Sie die folgende Syntax zum Hinzufügen von Zeilen in einer Tabelle mit Hilfe der Insertrow () -Methode:

Tisch.Insertrow (Index);

Hier, "Index”Zeigt die Position an, in der Sie eine neue Zeile hinzufügen möchten, z. B. am Ende der Tabelle oder am Start.

Beispiel 1: Hinzufügen einer Zeile oben/Start der Tabelle

Hier erstellen wir eine Tabelle und eine Schaltfläche in einer HTML -Datei mithilfe der HTML

Und Stichworte. Die Tabelle enthält drei Zeilen und drei Säulen oder Zellen:

Zelle der Reihe 1	Zelle der Reihe 1	Zelle der Reihe 1
Zelle der Reihe 2	Zelle der Reihe 2	Zelle der Reihe 2
Zelle der Reihe 3	Zelle der Reihe 3	Zelle der Reihe 3

Erstellen Sie dann eine Schaltfläche, mit der die “aufgerufen werdenZeile hinzufügen()Schaltfläche beim Klicken:

Klicken Sie hier, um die Zeile oben in der Tabelle hinzuzufügen

Zum Styling der Tabelle setzen wir den Rand jeder Zelle und die Tabelle wie unten angegeben:

Tabelle, td
Grenze: 1PX Solid Black;

Jetzt werden wir mit JavaScript Zeilen in der Tabelle oben/Start der Tabelle hinzufügen. Definieren Sie dazu eine Funktion namens “Zeile hinzufügen()”Das wird auf dem Onclick () -Event der Button aufgerufen. Abrufen Sie dann die erstellte Tabelle mit der “abGetElementById ()" Methode. Danach nennen Sie das "Insertrow ()Methode durch Übergabe der “0Index als Parameter, der angibt, dass die Zeile am Start der Tabelle hinzugefügt wird.

Dann rufen Sie die “auf"InsertCell ()Methode durch Übergabe von Indizes, die zeigen, wie viele Zellen in die Zeile hinzugefügt werden. Fügen Sie schließlich die Textdaten oder den Text in Zellen hinzu. “Innerhtml" Eigentum:

functionAddrow ()
var tablerow = dokument.GetElementById ("Tabelle");
var row = tablerow.Insertrow (0);
var cell1 = row.InsertCell (0);
var cell2 = Zeile.InsertCell (1);
var cell3 = row.InsertCell (2);
cell1.Innerhtml = "Zelle der neuen Reihe";
cell2.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 zuletzt/Ende der Tabelle eine Zeile einfügen möchten, übergeben Sie die “-1"Index zum"Insertrow ()" Methode. Es wird endlich die Zeile hinzugefügt, wenn die Schaltfläche klickt:

functionAddrow ()
var tablerow = dokument.GetElementById ("Tabelle");
var row = tablerow.Insertrow (-1);
var cell1 = row.InsertCell (0);
var cell2 = Zeile.InsertCell (1);
var cell3 = row.InsertCell (2);
cell1.Innerhtml = "Zelle der neuen Reihe";
cell2.Innerhtml = "Zelle der neuen Reihe";
Zelle3.Innerhtml = "Zelle der neuen Reihe";

Ausgang

Wechseln wir zur anderen Methode!

Methode 2: Fügen Sie Zeile zur HTML -Tabelle hinzu, indem Sie ein neues Element erstellen

Es gibt eine andere Methode zum Hinzufügen einer Zeile in einer Tabelle, in der neue Elemente mit JavaScript -Methoden erstellt werden, einschließlich der “CreateLement ()”Methode und die“appendChild ()" Methode. Das CreateLement () erstellt die Und Elemente und die appendChild () -Methode wenden die Zellen und Zeilen in einer Tabelle an.

Syntax

Befolgen Sie die bereitgestellte Syntax, um ein neues Element zum Hinzufügen einer Zeile in einer Tabelle mit JavaScript zu erstellen:

dokumentieren.CreateLement ("tr");

Hier das "trIst die Tabellenzeile.

Beispiel

Wir werden nun die gleiche zuvor erstellte Tabelle in HTML mit einer CSS -Datei verwenden, aber in der JavaScript -Datei werden wir die “verwenden“CreateLement ()" Methode. Fügen Sie dann die Daten oder den Text in den Zellen mit der “hinzuInnerhtml" Eigentum. Zuletzt rufen Sie die auf “appendChild ()Methode, die die Zellen in einer Reihe und dann die Zeile in einer Tabelle hinzufügt:

functionAddrow ()
var tablerow = dokument.GetElementById ("Tabelle");
var row = document.CreateLement ("tr");
var cell1 = dokument.CreateLement ("TD");
var cell2 = Dokument.CreateLement ("TD");
var cell3 = dokument.CreateLement ("TD");
cell1.Innerhtml = "Zelle der neuen Reihe";
cell2.Innerhtml = "Zelle der neuen Reihe";
Zelle3.Innerhtml = "Zelle der neuen Reihe";
Reihe.appendChild (cell1);
Reihe.appendChild (cell2);
Reihe.appendChild (cell3);
Tischreihe.appendChild (row);

Die Ausgabe zeigt, dass die neue Zeile am Ende der Tabelle erfolgreich hinzugefügt wird:

Wir haben alle Methoden zum Hinzufügen einer Zeile in einer Tabelle mit JavaScript zusammengestellt.

Abschluss

Verwenden Sie zum Hinzufügen einer Zeile in einer Tabelle die beiden Ansätze: Insertrow () -Methode oder erstellen. Mit der Insertrow () -Methode können Sie zu Beginn des Endes der Tabelle eine Zeile hinzufügen, indem Sie Indexes übergeben. In diesem Handbuch wurde die Prozeduren zum Hinzufügen einer neuen Zeile in einer Tabelle erläutert, indem Sie mit JavaScript auf eine Schaltfläche klicken.