Dessinez une table HTML dynamique avec JavaScript

Rendu ou dessinez une table HTML avec JavaScript

dans ce message, je vais vous montrer comment créer une table ou un élément dynamique <table>

Pour cela, nous n’utiliserons aucun cadre. Les fonctions que nous verrons sont les suivantes:

• document.createElement – pour créer un élément, dans ce cas, le tr et le td
• document.querySelector – Faites référence à DOM ÉLÉMENTS
• elemento.appendChild – attachez un élément enfant à un autre

Qu’est-ce que nous allons dessiner sur la table est un arrangement. C’est-à-dire que de l’arrangement, nous allons dessiner une table HTML avec JavaScript de manière dynamique.

Table

Remarque: Si vous ne savez pas comment travailler avec les tables statiques dans le look HTML A ce poste.

Pour dessiner une table HTML avec JavaScript, vous devez définir l’en-tête de la table, car avec JavaScript, nous allons simplement prendre soin du corps.

donc , il reste comme ceci:

Voir le gist sur github.

Nous avons une table HTML avec une en-tête, il y a le tbody

dans cet élément est où nous allons attacher les éléments <tr> qui à son tour aura <td>, tout cela avec JavaScript.

ainsi que c’est, la table n’a toujours pas de corps, illicite uniquement l’en-tête:

L’arrangement

L’arrangement que nous allons tirer sera pris d’un autre de mon code postal Ras La même chose est définie comme suit:

Voir le gist sur github.

Ce que nous ferons est de passer à travers l’arrangement en utilisant forEach et Pour chaque élément:

1. créer un élément tr.
2. à cet élément tr Nous allons attacher 3 éléments td, comme chaque élément td correspond respectivement au nom, au prix et au code du produit.
3. pour définir le texte de td Nous définissons votre propriété textContent.
4. que Item tr Nous l’attachons au corps de la table

Voyons que dans le code.

Dessine la table HTML avec JavaScript

Nous devons faire référence au corps de la table à l’aide de document.querySelector, et une fois que nous en avons une référence, nous créons la ligne de la table, Nous ajoutons des données et l’attachons au corps.

Le script est comme suit:

Voir le gist sur github.

Le code est mieux expliqué dans les commentaires.

Au fait, j’utilise le préfixe $ dans mes variables simplement pour différencier les variables et les éléments du DOM, à la fin au niveau de la langue sont les mêmes, mais comme programmeur, je sais que s’il commence par $ Ensuite, fait référence à un élément du DOM.

La table a maintenant tous les produits ajoutés de manière dynamique, et on dirait que ceci:

Si vous souhaitez tester le code, cliquez ici.

Conclusion

Dans ce cas, il s’agissait d’un arrangement et d’une table, mais vous pouvez dessiner quelque chose avec JavaScript, manipuler le SUND.

Vous devez simplement utiliser appendChild et createElement.

En savoir plus sur Moderne JavaScript ou HTML E n mon blog.