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 DOMelemento.appendChild
– Adjuntar un elemento hijo a otro elementoLo 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.
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 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:
tr
.tr
le vamos a adjuntar 3 elementos td
, pues cada elemento td
corresponde respectivamente al nombre, precio y código del producto.td
establecemos su propiedad textContent
.tr
lo adjuntamos al cuerpo de la tablaVeamos eso en código.
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í.
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.
En mi blog te he enseñado a usar youtube-dl para descargar vídeos con permiso del…
Siguiendo con los tutoriales que consumen la API de los Bots de Telegram con cURL…
En un post previo te enseñé a enviar un mensaje en nombre de un Bot…
En este artículo te voy a mostrar una guía para imprimir en una impresora térmica…
La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…
Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…
Esta web usa cookies.