Dieser Blogbeitrag demonstriert den Prozess zum Erstellen einer dynamischen Tabelle in JavaScript.
Wie erstelle ich eine Tabelle dynamisch in JavaScript?
Sehen wir uns ein Beispiel an, 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 aufnimmt und sie dann in einer Tabelle anzeigt, indem es sie dynamisch hinzufügt:
< Div.-ID = 'meinFormular' >
< h4 > Füllen Sie das untenstehende Formular aus : h4 >
< Etikett > Name : Etikett >
< Eingabetyp = 'Text' Ich würde = 'Name' >< Br >< Br >
< Etikett > Geschlecht : Etikett >
< Eingabetyp = 'Text' Ich würde = 'Geschlecht' >< Br >< Br >
< Etikett > Bezeichnung : Etikett >
< Eingabetyp = 'Text' Ich würde = 'Bezeichnung' >< Br >< Br >
< Etikett > Beitreten Datum : Etikett >
< Eingabetyp = 'Datum' Ich würde = 'Datum' >< Br >< Br >
< Schaltflächen-ID = 'hinzufügen' Wert = 'Hinzufügen' > Daten zur Tabelle hinzufügen Taste >
div >
Im obigen Code-Snippet:
- Erstellen Sie zunächst eine Überschrift „ Füllen Sie das folgende Formular aus: “.
- Eingabefelder erstellen für „ Name “, „ Geschlecht “, „ Bezeichnung ', und ' Beitrittsdatum „mit zugewiesenen IDs“ Name “, „ Geschlecht “, „ Bezeichnung ', und ' Datum “, um die Eingabewerte vom Benutzer zu übernehmen.
- Diese IDs werden verwendet, um die Referenz der Elemente in JavaScript zu erhalten.
- Erstellen Sie dann eine Schaltfläche mit dem „ anklicken ” Eigenschaft, die die “ 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:
< div >
< h4 > Mitarbeiterdatensatz b > h4 >
< Center >
< Tabellen-ID = 'Tabellendaten' Grenze = '1' Zellpolsterung = 'zwei' >
< tr >
< td >< b > Name b > td >
< td >< b > Geschlecht b > td >
< td >< b > Bezeichnung b > td >
< td >< b > Beitrittsdatum b > td >
tr >
Tisch >
Center >
div >
Im obigen Code:
- Erstellen Sie eine Tabelle mit der ID „ Tabellendaten “, die in der Skriptdatei verwendet wird, um die Referenz dieser Tabelle abzurufen und ihr dann die Daten hinzuzufügen.
- Die Tabelle enthält vier Spalten: „ Name “, „ Geschlecht “, „ Bezeichnung ', und ' Beitrittsdatum “, die Daten gemäß Spaltennamen speichert.
Das Ausführen der HTML-Datei führt zu der folgenden Browserausgabe:
Fügen wir Funktionen zum dynamischen Erstellen von Tabellen mit JavaScript hinzu. Verwenden Sie in der Skriptdatei oder dem Tag den folgenden Code, der dynamisch eine Tabelle erstellt:
Funktion addTableRow ( ) {war Name = dokumentieren. getElementById ( 'Name' ) ;
war Geschlecht = dokumentieren. getElementById ( 'Geschlecht' ) ;
war Bezeichnung = dokumentieren. getElementById ( 'Bezeichnung' ) ;
war Datum = dokumentieren. getElementById ( 'Datum' ) ;
war Tisch = dokumentieren. getElementById ( 'Tabellendaten' ) ;
war Reihenanzahl = Tisch. Reihen . Länge ;
war die Zeile = Tisch. Zeile einfügen ( Reihenanzahl ) ;
die Zeile. EinfügenZelle ( 0 ) . innerHTML = Name. Wert ;
die Zeile. EinfügenZelle ( 1 ) . innerHTML = Geschlecht. Wert ;
die Zeile. EinfügenZelle ( zwei ) . innerHTML = Bezeichnung. Wert ;
die Zeile. EinfügenZelle ( 3 ) . innerHTML = Datum. Wert ;
}
Im obigen Ausschnitt:
- Definieren Sie zuerst eine Funktion „ addTableRow() “, der das Klickereignis der HTML-Schaltfläche auslöst.
- Rufen Sie dann nacheinander die Referenz aller Eingabefelder mit den jeweils zugewiesenen IDs mit dem „ getelementById() “-Methode und speichern Sie sie in Variablen.
- Diese Variablen werden verwendet, um den Wert der Eingabefelder mithilfe des HTML-Codes „ Wert “-Eigenschaft und setzen Sie sie in den einzelnen Zellen der Tabelle über die “ innerHTML ' Eigentum.
- Fügen Sie Zeilen in einer Tabelle hinzu, indem Sie das „ Tabellenzeilenlänge ”-Eigenschaft und speichern Sie dann Werte darin.
Ausgabe
Die obige Ausgabe zeigt an, dass die dynamische Tabelle erfolgreich erstellt wurde, indem Daten in einem Formular mit JavaScript hinzugefügt wurden.
Fazit
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 rufen Sie dann die Referenz der Felder mithilfe vordefinierter JavaScript-Methoden wie „ getElementById() “-Methode und rufen Sie dann ihre eingegebenen Werte mit der „ Wert ' Eigentum. Stellen Sie diese Werte in den jeweiligen Spalten einer Tabelle mit dem „ innerHTML ' Eigentum. Dieser Blogbeitrag demonstriert den Prozess zum Erstellen einer dynamischen Tabelle in JavaScript.