Comment créer une table dynamiquement en javascript

Un tableau dynamique est un tableau qui modifie son nombre de lignes en fonction de l'entrée reçue au moment de l'exécution. Certains sites Web ou applications en ligne, tels que les sites Web d'entreprise, doivent créer un tableau dynamiquement tout en ajoutant des données ou des informations. Cela peut être fait en utilisant JavaScript, car JavaScript est un langage de script qui utilise le typage dynamique.

Ce billet de blog démontrera le processus de création d'une table dynamique dans JavaScript.

Comment créer une table dynamiquement en javascript?

Voyons un exemple expliquant comment une table dynamique sera créée dans JavaScript.

Exemple
Pour commencer, écrivez les lignes suivantes dans un nouveau document HTML pour créer un formulaire qui prend des données, puis les affiche dans un tableau en l'ajoutant dynamiquement:

Remplissez le formulaire ci-dessous:

Nom:



Genre:



Désignation:



Date d'inscription:



Ajouter des données à la table

Dans l'extrait de code ci-dessus:

• Tout d'abord, créez un titre "Remplissez le formulaire ci-dessous:".
• Créer des champs d'entrée pour «Nom","Genre","Désignation", et "Date d'inscription"Avec ID attribué"nom","genre","désignation", et "date»Respectivement, pour prendre les valeurs d'entrée de l'utilisateur.
• Ces identifiants sont utilisés pour obtenir la référence des éléments en JavaScript.
• Ensuite, créez un bouton avec le "sur clic«Propriété qui appellera le«addTableRow ()”Fonction dans un fichier de script, pour ajouter et afficher les données dans un tableau:

Ici, dans le fichier HTML, écrivez ces lignes de code pour créer une structure de table, où les données seront ajoutées dynamiquement:

Enregistrement des employés

Nom

Genre

Désignation

Date d'inscription

Dans le code ci-dessus:

• Créez une table avec l'ID "TableData"Cela sera utilisé dans le fichier de script pour obtenir la référence de ce tableau, puis ajouter les données à lui.
• Le tableau contient quatre colonnes, «Nom","Genre","Désignation", et "Date d'inscription"Cela stockera les données en fonction des noms de colonne.

L'exécution du fichier HTML entraînera la sortie du navigateur suivant:

Ajoutons des fonctionnalités pour créer des tables dynamiquement à l'aide de JavaScript. Dans le fichier ou la balise de script, utilisez le code ci-dessous qui créera une table dynamiquement:

fonction addTableRow ()
var name = document.getElementById ("nom");
Var Gender = Document.GetElementById ("Gender");
Var désignation = document.GetElementById ("désignation");
Var Date = Document.GetElementById ("Date");
Var Table = Document.getElementById ("TableData");
var rowcount = table.Lignes.longueur;
Var Row = Table.insertrow (rowCount);
ligne.INSERTCELL (0).innerhtml = nom.valeur;
ligne.InsertCell (1).innerhtml = sexe.valeur;
ligne.InsertCell (2).innerhtml = désignation.valeur;
ligne.InsertCell (3).innerhtml = date.valeur;

Dans l'extrait ci-dessus:

• Tout d'abord, définissez une fonction "addTableRow ()"Cela déclenchera l'événement de clic du bouton HTML.
• Ensuite, obtenez la référence de tous les champs d'entrée un par un en utilisant leurs ID assignés respectifs en utilisant le «getElementByid ()«Méthode et les stocker en variables.
• Ces variables seront utilisées pour obtenir la valeur des champs d'entrée en utilisant le HTML "valeur”Propriété et placez-les dans les cellules individuelles du tableau en utilisant le«innerhtml" propriété.
• Ajoutez des lignes dans une table en utilisant le "tableau.Lignes.longueur”Propriété puis stockez-y des valeurs.

Sortir

La sortie ci-dessus indique que la table dynamique est créée avec succès en ajoutant des données sous une forme en utilisant JavaScript.

Conclusion

La table dynamique est créée en utilisant les différentes propriétés HTML avec des méthodes prédéfinies JavaScript. Tout d'abord, créez une forme dans un fichier HTML, puis obtenez la référence des champs à l'aide de méthodes prédéfinies JavaScript telles que le «getElementByid ()«Méthode puis récupérer leurs valeurs entrées en utilisant le«valeur" propriété. Définissez ces valeurs dans les colonnes respectives d'une table en utilisant le «innerhtml" propriété. Ce billet de blog montre le processus de création d'une table dynamique en javascript.