Dibuixar taula HTML dinàmica amb JavaScript

Renderitzar o dibuixar una taula HTML amb JavaScript

En aquest post et mostraré a crear una taula dinàmica o element <table> d’HTML amb JavaScript. És a dir, amb JavaScript pur dibuixar una taula, agregar files i columnes.

Per a això no farem servir cap framework. Les funcions que veurem són:

• document.createElement – Per crear un element, en aquest cas el tr i el td
• document.querySelector – Obtenir referència a elements de DOM
• elemento.appendChild – Adjunta un element fill a un altre element

El que anem a dibuixar a la taula és un arranjament. És a dir, a partir de l’arranjament anem a dibuixar una taula HTML amb JavaScript de manera dinàmica.

La taula

Nota: si no saps com treballar amb les taules estàtiques en HTML mira aquest post.

Per a dibuixar una taula HTML amb JavaScript cal definir la capçalera de la taula, ja que amb JavaScript només ens anem a encarregar de el cos.

Per tant, queda així:

Veure the gist on github.

Tenim una taula HTML amb una capçalera, i dins de la mateixa ha el tbody amb l’id cuerpoTabla.

en aquest element és a on anem a adjuntar els elements <tr> que al seu torn tindran elements <td>, tot això amb JavaScript.

Així com està, la taula encara no té cos, només té la capçalera:

L’arranjament

L’arranjament que anem a dibuixar serà un pres d’un altre dels meus posts sobre codis de bar ras. El mateix es defineix així:

Veure the gist on github.

El que farem serà recórrer l’arranjament usant forEach i per cada element :

1. Crear un element tr.
2. A aquest element tr us anem a adjuntar 3 elements td, ja que cada element td correspon respectivament a el nom, preu i codi del producte.
3. Per establir el text de l’td establim la seva propietat textContent.
4. Aquest element tr el adjuntem a el cos de la taula

Vegem això en codi.

Dibuixar taula HTML amb JavaScript

Hem obtenir una referència a el cos de la taula usant document.querySelector, i una vegada que tenim una referència a ell, vam crear la fila de la taula, li afegim dades i la adjuntem a el cos.

L’script queda com es veu a continuació:

Veure the gist on github.

El codi s’explica millor en els comentaris.

Per cert, utilitzo el prefix $ en els meus variables simplement per diferenciar entre variables i elements de DOM, a la fin a nivell de llenguatge són el mateix, però com a programador sé que si comença amb $ llavors es refereix a un element de l’ DOM.

Ara la taula té tots els productes agregats de manera dinàmica, i es veu així:

Si vols provar el codi clica aquí.

Conclusió

En aquest cas va ser amb un arranjament i una taula, però pots dibuixar qualsevol cosa amb JavaScript, manipulant el DOM.

Només has de fer servir appendChild i createElement.

Saber-ne més sobre JavaScript modern o HTML i n el meu bloc.