Ce billet de blog montrera le processus de création d'un tableau dynamique en JavaScript.
Comment créer une table dynamiquement en JavaScript ?
Voyons un exemple expliquant comment un tableau dynamique sera créé en JavaScript.
Exemple
Pour commencer, écrivez les lignes suivantes dans un nouveau document HTML pour créer un formulaire qui prend des données et les affiche ensuite dans un tableau en les ajoutant dynamiquement :
< identifiant div = 'mon formulaire' >
< h4 > Remplissez le formulaire ci-dessous : h4 >
< étiquette > Nom : étiquette >
< type d'entrée = 'texte' identifiant = 'Nom' >< Br >< Br >
< étiquette > Le genre : étiquette >
< type d'entrée = 'texte' identifiant = 'le genre' >< Br >< Br >
< étiquette > La désignation : étiquette >
< type d'entrée = 'texte' identifiant = 'la désignation' >< Br >< Br >
< étiquette > Joindre Date : étiquette >
< type d'entrée = 'Date' identifiant = 'Date' >< Br >< Br >
< identifiant du bouton = 'ajouter' évaluer = 'Ajouter' > Ajouter des données au tableau bouton >
div >
Dans l'extrait de code ci-dessus :
- Tout d'abord, créez une rubrique ' Remplissez le formulaire ci-dessous : ”.
- Créez des champs de saisie pour ' Nom ”, “ Le genre ”, “ La désignation ', et ' Date d'inscription ' avec les identifiants attribués ' Nom ”, “ le genre ”, “ la 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 une table :
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 :
< div >
< h4 > Dossier de l'employé b > h4 >
< centre >
< identifiant de table = 'tableData' frontière = '1' rembourrage cellulaire = 'deux' >
< tr >
< td >< b > Nom b > td >
< td >< b > Le genre b > td >
< td >< b > La désignation b > td >
< td >< b > Date d'inscription b > td >
tr >
table >
centre >
div >
Dans le code ci-dessus :
- Créer une table avec l'id ' tableData ” qui sera utilisé dans le fichier de script pour obtenir la référence de cette table puis y ajouter les données.
- Le tableau contient quatre colonnes, ' Nom ”, “ Le genre ”, “ La désignation ', et ' Date d'inscription ” qui stockera les données en fonction des noms de colonnes.
L'exécution du fichier HTML entraînera la sortie de navigateur suivante :
Ajoutons des fonctionnalités pour créer des tables dynamiquement à l'aide de JavaScript. Dans le fichier de script ou la balise, utilisez le code ci-dessous qui créera une table dynamiquement :
fonction addTableRow ( ) {a été Nom = document. getElementById ( 'Nom' ) ;
a été le genre = document. getElementById ( 'le genre' ) ;
a été la désignation = document. getElementById ( 'la désignation' ) ;
a été Date = document. getElementById ( 'Date' ) ;
a été table = document. getElementById ( 'tableData' ) ;
a été rowCount = table. Lignes . longueur ;
a été ligne = table. insertRow ( rowCount ) ;
ligne. insérerCellule ( 0 ) . innerHTML = Nom. évaluer ;
ligne. insérerCellule ( 1 ) . innerHTML = le genre. évaluer ;
ligne. insérerCellule ( deux ) . innerHTML = la désignation. évaluer ;
ligne. insérerCellule ( 3 ) . innerHTML = Date. évaluer ;
}
Dans l'extrait ci-dessus :
- Tout d'abord, définissez une fonction ' addTableRow() ” qui déclenchera l'événement click du bouton HTML.
- Ensuite, obtenez la référence de tous les champs de saisie un par un en utilisant leurs identifiants respectifs en utilisant le ' getelementById() ” et stockez-les dans des variables.
- Ces variables seront utilisées pour obtenir la valeur des champs de saisie à l'aide du code HTML ' évaluer ' et définissez-les dans les cellules individuelles du tableau à l'aide de la propriété ' innerHTML ' propriété.
- Ajouter des lignes dans un tableau en utilisant le ' table.lignes.longueur ” propriété, puis y stocker des valeurs.
Production
La sortie ci-dessus indique que la table dynamique est créée avec succès en ajoutant des données dans un formulaire à l'aide de JavaScript.
Conclusion
Le tableau dynamique est créé à l'aide des différentes propriétés HTML avec des méthodes JavaScript prédéfinies. Tout d'abord, créez un formulaire dans un fichier HTML, puis récupérez la référence des champs à l'aide de méthodes JavaScript prédéfinies telles que le ' getElementById() ” puis récupérer leurs valeurs saisies à l'aide de la méthode “ évaluer ' propriété. Définissez ces valeurs dans les colonnes respectives d'un tableau à l'aide de la touche ' innerHTML ' propriété. Ce billet de blog montre le processus de création d'un tableau dynamique en JavaScript.