En este tutorial aprenderemos cómo generar una tabla utilizando los métodos de creación de elementos y atributos de JavaScript.
Ejemplo de tabla y código para generarla
// 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
Una idea sobre “Generar tabla con JavaScript”
I love it whenever people come together and share views.
Great blog, sttick with it!