So erstellen Sie Tabelle dynamisch in JavaScript

Eine dynamische Tabelle ist eine Tabelle, die ihre Anzahl der Zeilen abhängig von der zum Laufzeit empfangenen Eingabe ändert. Einige Websites oder Online -Anwendungen, wie z. B. Geschäftswebsites, müssen eine Tabelle dynamisch erstellen, während einige Daten oder Informationen hinzugefügt werden. Es kann mit JavaScript erfolgen.

Dieser Blog -Beitrag demonstriert den Prozess zum Erstellen einer dynamischen Tabelle in JavaScript.

So erstellen Sie eine Tabelle dynamisch in JavaScript?

Lassen Sie uns ein Beispiel sehen, das erklärt, wie eine dynamische Tabelle in JavaScript erstellt wird.

Beispiel
Schreiben Sie zunächst die folgenden Zeilen in ein neues HTML -Dokument, um ein Formular zu erstellen, das Daten annimmt, und zeigt es dann in einer Tabelle an, indem Sie es dynamisch hinzufügen:

Füllen Sie das folgende Formular aus:

Name:



Geschlecht:



Bezeichnung:



Beitrittsdatum:



Daten zur Tabelle hinzufügen

Im obigen Code -Snippet:

• Erstellen Sie zuerst eine Überschrift “Füllen Sie das folgende Formular aus:”.
• Erstellen Sie Eingabefelder für “Name","Geschlecht","Bezeichnung", Und "Beitrittsdatum"Mit zugewiesenen IDs"Name","Geschlecht","Bezeichnung", Und "Datum”Jeweils, um die Eingabewerte vom Benutzer zu nehmen.
• Diese IDs werden verwendet, um die Referenz der Elemente in JavaScript zu erhalten.
• Erstellen Sie dann eine Schaltfläche mit dem “ONCLICK”Eigenschaft, die das nennen"Addtablerow ()Funktion in einer Skriptdatei, um die Daten in einer Tabelle hinzuzufügen und anzuzeigen:

Schreiben Sie hier in der HTML -Datei diese Codezeilen, um eine Tabellenstruktur zu erstellen, in der Daten dynamisch hinzugefügt werden:

Mitarbeiteraufzeichnung

Name

Geschlecht

Bezeichnung

Beitrittsdatum

Im obigen Code:

• Erstellen Sie eine Tabelle mit der ID “gerettetataDas wird in der Skriptdatei verwendet, um die Referenz dieser Tabelle abzurufen und dann die Daten hinzuzufügen.
• Die Tabelle enthält vier Spalten “,“Name","Geschlecht","Bezeichnung", Und "BeitrittsdatumDas speichern Daten nach Spaltennamen.

Durch das Ausführen der HTML -Datei führt die folgende Browserausgabe:

Fügen wir Funktionen zum Erstellen von Tabellen mithilfe von JavaScript hinzu. Verwenden Sie in der Skriptdatei oder im Tag -Tag den folgenden Code, der eine Tabelle dynamisch erstellt:

Funktion addtablerow ()
var name = dokument.GetElementById ("Name");
var Gender = Dokument.GetElementById ("Geschlecht");
var Bezeichnung = Dokument.GetElementById ("Bezeichnung");
var date = dokument.GetElementById ("Datum");
var table = document.getElementById ("tabbenata");
var rowCount = Tabelle.Reihen.Länge;
var row = table.Insertrow (RowCount);
Reihe.InsertCell (0).Innerhtml = Name.Wert;
Reihe.InsertCell (1).Innerhtml = Geschlecht.Wert;
Reihe.InsertCell (2).Innerhtml = Bezeichnung.Wert;
Reihe.InsertCell (3).Innerhtml = Datum.Wert;

Im obigen Snippet:

• Definieren Sie zuerst eine Funktion “Addtablerow ()Das löst das Klickereignis der HTML -Schaltfläche aus.
• Erhalten Sie dann die Referenz aller Eingabefelder nacheinander mit ihren jeweiligen zugewiesenen IDs mit der “GetElementById ()Methode und speichern Sie sie in Variablen.
• Diese Variablen werden verwendet, um den Wert der Eingangsfelder mithilfe der HTML zu erhaltenWertEigenschaft und setzen Sie sie in den einzelnen Zellen in der Tabelle mit dem “Innerhtml" Eigentum.
• Fügen Sie Zeilen in einer Tabelle hinzu, die die “verwendet“Tisch.Reihen.LängeEigenschaft und dann Werte darin speichern.

Ausgang

Die obige Ausgabe zeigt an, dass die dynamische Tabelle erfolgreich erstellt wird, indem Daten in einem Formular mit JavaScript addiert werden.

Abschluss

Die dynamische Tabelle wird unter Verwendung der verschiedenen HTML -Eigenschaften mit vordefinierten JavaScript -Methoden erstellt. Erstellen Sie zunächst ein Formular in einer HTML -Datei und erhalten Sie dann die Referenz der Felder mithilfe von vordefinierten JavaScript -Methoden wie die “GetElementById ()Methode und dann ihre eingegebenen Werte mit der “abrufenWert" Eigentum. Legen Sie diese Werte in den jeweiligen Spalten einer Tabelle mit der “ein“Innerhtml" Eigentum. Dieser Blog -Beitrag zeigt den Prozess zum Erstellen einer dynamischen Tabelle in JavaScript.