Dibujar tabla HTML dinámica con JavaScript

Productos de un arreglo dibujamos de manera dinámica con JavaScript sobre un tabla

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í:

<!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 tr le vamos a adjuntar 3 elementos td, pues cada elemento td corresponde respectivamente al nombre, precio y código del producto.
Para establecer el texto del td establecemos su propiedad textContent.
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:

/**
 * 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í:

Productos de un arreglo dibujamos de manera dinámica con JavaScript sobre un tabla

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.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/