Generar tabla con JavaScript

Generar tabla con JavaScript

Generar tabla con JavaScript

En este tutorial aprenderemos cómo generar una tabla utilizando los métodos de creación de elementos y atributos de JavaScript.

Crearemos una tabla de este estilo

Ejemplo de tabla generada con JavaScript
Ejemplo de tabla
// Obtenemos la referencia del elemento body
var body = document.getElementsByTagName("body")[0];
// Creamos un elemento <table> y un elemento <tbody>
var tabla = document.createElement("table");
var tblBody = document.createElement("tbody");
// Creamos las celdas
for (var i = 0; i < 10; i++) {
// Creamos las hileras de la tabla
var fila = document.createElement("tr");
for (var j = 0; j < 15; j++) {
// Crea un elemento <td> y un nodo de texto, hace que el nodo de
// texto sea el contenido de <td>, ubica el elemento <td> al final
// de la hilera de la tabla
var celda = document.createElement("td");
var textoCelda = document.createTextNode(i + " - " + j);
celda.appendChild(textoCelda);
fila.appendChild(celda);
}
// agregamos la hilera al final de la tabla (al final del elemento tblbody)
tblBody.appendChild(fila);
}
// posicionamos el <tbody> debajo del elemento <table>
tabla.appendChild(tblBody);
// appends <table> into <body>
body.appendChild(tabla);
// modifica el atributo "border" de la tabla y lo fija a "2";
tabla.setAttribute("border", 2);
tabla.setAttribute("id", "tabla");
var result = document.getElementById("resultado");
result.appendChild(tabla);

Si te ha gustado no olvides compartir en redes sociales.

Espero que te haya servido. Cualquier duda deja un comentario. Un saludo

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Una idea sobre “Generar tabla con JavaScript”

Translate »
Ir a la barra de herramientas