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 eltry eltddocument.querySelector– Obtener referencia a elementos del DOMelemento.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í:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Dibujar tabla HTML con JavaScript</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Tabla HTML dibujada con JS</h1>
<a href="//parzibyte.me/blog">By Parzibyte</a>
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Precio</th>
<th>Código</th>
</tr>
</thead>
<tbody id="cuerpoTabla">
</tbody>
</table>
<script src="script.js">
</script>
</body>
</html>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í:
const productos = [{
id: 1,
nombre: "Mouse Logitech",
precio: 20,
codigo: "123",
},
{
id: 2,
nombre: "Xiaomi Mi A1",
precio: 5000,
codigo: "123444",
},
{
id: 3,
nombre: "Galletas",
precio: 10,
codigo: "20205",
},
{
id: 4,
nombre: "Computadora portátil",
precio: 30000,
codigo: "7700545",
},
];Lo que haremos será recorrer el arreglo usando forEach y por cada elemento:
- Crear un elemento
tr. - A ese elemento
trle vamos a adjuntar 3 elementostd, pues cada elementotdcorresponde respectivamente al nombre, precio y código del producto. - Para establecer el texto del
tdestablecemos su propiedadtextContent. - Ese elemento
trlo 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:
/**
* Dibujar una tabla de HTML
* usando JavaScript puro
*
* @author parzibyte
*
* @see https://parzibyte.me/blog
*/
const productos = [{
id: 1,
nombre: "Mouse Logitech",
precio: 20,
codigo: "123",
},
{
id: 2,
nombre: "Xiaomi Mi A1",
precio: 5000,
codigo: "123444",
},
{
id: 3,
nombre: "Galletas",
precio: 10,
codigo: "20205",
},
{
id: 4,
nombre: "Computadora portátil",
precio: 30000,
codigo: "7700545",
},
];
// Ahora dibujamos la tabla
const $cuerpoTabla = document.querySelector("#cuerpoTabla");
// Recorrer todos los productos
productos.forEach(producto => {
// Crear un <tr>
const $tr = document.createElement("tr");
// Creamos el <td> de nombre y lo adjuntamos a tr
let $tdNombre = document.createElement("td");
$tdNombre.textContent = producto.nombre; // el textContent del td es el nombre
$tr.appendChild($tdNombre);
// El td de precio
let $tdPrecio = document.createElement("td");
$tdPrecio.textContent = producto.precio;
$tr.appendChild($tdPrecio);
// El td del código
let $tdCodigo = document.createElement("td");
$tdCodigo.textContent = producto.codigo;
$tr.appendChild($tdCodigo);
// Finalmente agregamos el <tr> al cuerpo de la tabla
$cuerpoTabla.appendChild($tr);
// Y el ciclo se repite hasta que se termina de recorrer todo el arreglo
});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í:
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.
