Renderizar o dibujar una tabla HTML con JavaScript

En este post te mostraré a crear una tabla dinámica o elemento <table> de HTML con JavaScript. Es decir, con JavaScript puro dibujar una tabla, agregarle filas y columnas.

Para ello no usaremos ningún framework. Las funciones que veremos son:

• document.createElement – Para crear un elemento, en este caso el tr y el td
• document.querySelector – Obtener referencia a elementos del DOM
• elemento.appendChild – Adjuntar un elemento hijo a otro elemento

Lo que vamos a dibujar en la tabla es un arreglo. Es decir, a partir del arreglo vamos a dibujar una tabla HTML con JavaScript de manera dinámica.

La tabla

Nota: si no sabes cómo trabajar con las tablas estáticas en HTML mira este post.

Para dibujar una tabla HTML con JavaScript hay que definir el encabezado de la tabla, pues con JavaScript solo nos vamos a encargar del cuerpo.

Por lo tanto, queda así:

Tenemos una tabla HTML con un encabezado, y dentro de la misma existe el tbody con el id cuerpoTabla.

En ese elemento es en donde vamos a adjuntar los elementos <tr> que a su vez tendrán elementos <td>, todo esto con JavaScript.

Así como está, la tabla todavía no tiene cuerpo, solo tiene el encabezado:

El arreglo

El arreglo que vamos a dibujar va a ser uno tomado de otro de mis posts sobre códigos de barras. El mismo se define así:

Lo que haremos será recorrer el arreglo usando forEach y por cada elemento:

1. Crear un elemento tr.
2. A ese elemento tr le vamos a adjuntar 3 elementos td, pues cada elemento td corresponde respectivamente al nombre, precio y código del producto.
3. Para establecer el texto del td establecemos su propiedad textContent.
4. Ese elemento tr lo adjuntamos al cuerpo de la tabla

Veamos eso en código.

Dibujar tabla HTML con JavaScript

Debemos obtener una referencia al cuerpo de la tabla usando document.querySelector, y una vez que tenemos una referencia a él, creamos la fila de la tabla, le agregamos datos y la adjuntamos al cuerpo.

El script queda como se ve a continuación:

El código se explica mejor en los comentarios.

Por cierto, utilizo el prefijo $ en mis variables simplemente para diferenciar entre variables y elementos del DOM, al final a nivel de lenguaje son lo mismo, pero como programador sé que si empieza con $ entonces se refiere a un elemento del DOM.

Ahora la tabla tiene todos los productos agregados de manera dinámica, y se ve así:

Si quieres probar el código haz clic aquí.

Conclusión

En este caso fue con un arreglo y una tabla, pero puedes dibujar cualquier cosa con JavaScript, manipulando el DOM.

Solo debes usar appendChild y createElement.

Aprende más sobre JavaScript moderno o HTML en mi blog.