Hola a todos, hoy os explicare como podemos crear una tabla con DOM en Javascript.
Ya hemos visto como podemos crear elementos DOM con Javascript, hoy vamos a ver como podemos crear una tabla.
Una tabla contiene tr, th y td, también puede contener otras cosas.
Tendremos en el HTML, un div con un id donde meteremos la tabla.
Lo primero es coger la referencia del contenedor y crear la tabla:
function init(){
const contenedor = document.getElementById("resultado");
const tabla = document.createElement("table");
}
window.onload = init;
Ahora crearemos una fila con una etiqueta tr.
function init(){
const contenedor = document.getElementById("resultado");
const tabla = document.createElement("table");
let tr = document.createElement("tr");
}
window.onload = init;
Ahora creamos un th y un texto.
function init(){
const contenedor = document.getElementById("resultado");
const tabla = document.createElement("table");
let tr = document.createElement("tr");
let th = document.createElement("th");
let thText = document.createTextNode("Columna 1");
}
window.onload = init;
Ahora tenemos que asociarlo al th y meter el th y este al tr.
function init(){
const contenedor = document.getElementById("resultado");
const tabla = document.createElement("table");
let tr = document.createElement("tr");
let th = document.createElement("th");
let thText = document.createTextNode("Columna 1");
th.appendChild(thText);
tr.appendChild(th);
}
window.onload = init;
Ahora haremos lo mismo con dos th mas.
function init(){
const contenedor = document.getElementById("resultado");
const tabla = document.createElement("table");
let tr = document.createElement("tr");
let th = document.createElement("th");
let thText = document.createTextNode("Columna 1");
th.appendChild(thText);
tr.appendChild(th);
th = document.createElement("th");
thText = document.createTextNode("Columna 2");
th.appendChild(thText);
tr.appendChild(th);
th = document.createElement("th");
thText = document.createTextNode("Columna 3");
th.appendChild(thText);
tr.appendChild(th);
}
window.onload = init;
Ahora meteremos ese tr en la tabla.
function init(){
const contenedor = document.getElementById("resultado");
const tabla = document.createElement("table");
let tr = document.createElement("tr");
let th = document.createElement("th");
let thText = document.createTextNode("Columna 1");
th.appendChild(thText);
tr.appendChild(th);
th = document.createElement("th");
thText = document.createTextNode("Columna 2");
th.appendChild(thText);
tr.appendChild(th);
th = document.createElement("th");
thText = document.createTextNode("Columna 3");
th.appendChild(thText);
tr.appendChild(th);
tabla.appendChild(tr);
}
window.onload = init;
Ahora vamos a hacer lo mismo con td, dos veces para poner dos lineas mas
function init(){
const contenedor = document.getElementById("resultado");
const tabla = document.createElement("table");
let tr = document.createElement("tr");
let th = document.createElement("th");
let thText = document.createTextNode("Columna 1");
th.appendChild(thText);
tr.appendChild(th);
th = document.createElement("th");
thText = document.createTextNode("Columna 2");
th.appendChild(thText);
tr.appendChild(th);
th = document.createElement("th");
thText = document.createTextNode("Columna 3");
th.appendChild(thText);
tr.appendChild(th);
tabla.appendChild(tr);
tr = document.createElement("tr");
td = document.createElement("td");
tdText = document.createTextNode("Valor 1");
td.appendChild(tdText);
tr.appendChild(td);
td = document.createElement("td");
tdText = document.createTextNode("Valor 2");
td.appendChild(tdText);
tr.appendChild(td);
td = document.createElement("td");
tdText = document.createTextNode("Valor 3");
td.appendChild(tdText);
tr.appendChild(td);
tabla.appendChild(tr);
tr = document.createElement("tr");
td = document.createElement("td");
tdText = document.createTextNode("Valor 1");
td.appendChild(tdText);
tr.appendChild(td);
td = document.createElement("td");
tdText = document.createTextNode("Valor 2");
td.appendChild(tdText);
tr.appendChild(td);
td = document.createElement("td");
tdText = document.createTextNode("Valor 3");
td.appendChild(tdText);
tr.appendChild(td);
tabla.appendChild(tr);
}
window.onload = init;
No olvidéis que debéis meter la tabla en el contenedor que hemos cogido inicialmente.
function init(){
const contenedor = document.getElementById("resultado");
const tabla = document.createElement("table");
let tr = document.createElement("tr");
let th = document.createElement("th");
let thText = document.createTextNode("Columna 1");
th.appendChild(thText);
tr.appendChild(th);
th = document.createElement("th");
thText = document.createTextNode("Columna 2");
th.appendChild(thText);
tr.appendChild(th);
th = document.createElement("th");
thText = document.createTextNode("Columna 3");
th.appendChild(thText);
tr.appendChild(th);
tabla.appendChild(tr);
tr = document.createElement("tr");
td = document.createElement("td");
tdText = document.createTextNode("Valor 1");
td.appendChild(tdText);
tr.appendChild(td);
td = document.createElement("td");
tdText = document.createTextNode("Valor 2");
td.appendChild(tdText);
tr.appendChild(td);
td = document.createElement("td");
tdText = document.createTextNode("Valor 3");
td.appendChild(tdText);
tr.appendChild(td);
tabla.appendChild(tr);
tr = document.createElement("tr");
td = document.createElement("td");
tdText = document.createTextNode("Valor 1");
td.appendChild(tdText);
tr.appendChild(td);
td = document.createElement("td");
tdText = document.createTextNode("Valor 2");
td.appendChild(tdText);
tr.appendChild(td);
td = document.createElement("td");
tdText = document.createTextNode("Valor 3");
td.appendChild(tdText);
tr.appendChild(td);
tabla.appendChild(tr);
contenedor.appendChild(tabla);
}
window.onload = init;
Veamos el resultado:
Como vemos, esta sin bordes, por lo que añadiremos esto, después de crear el borde.
tabla.setAttribute("border", "1");
Ahora lo vemos así:
Os dejo el ejemplo completo:
function init(){
const contenedor = document.getElementById("resultado");
const tabla = document.createElement("table");
tabla.setAttribute("border", "1");
let tr = document.createElement("tr");
let th = document.createElement("th");
let thText = document.createTextNode("Columna 1");
th.appendChild(thText);
tr.appendChild(th);
th = document.createElement("th");
thText = document.createTextNode("Columna 2");
th.appendChild(thText);
tr.appendChild(th);
th = document.createElement("th");
thText = document.createTextNode("Columna 3");
th.appendChild(thText);
tr.appendChild(th);
tabla.appendChild(tr);
tr = document.createElement("tr");
td = document.createElement("td");
tdText = document.createTextNode("Valor 1");
td.appendChild(tdText);
tr.appendChild(td);
td = document.createElement("td");
tdText = document.createTextNode("Valor 2");
td.appendChild(tdText);
tr.appendChild(td);
td = document.createElement("td");
tdText = document.createTextNode("Valor 3");
td.appendChild(tdText);
tr.appendChild(td);
tabla.appendChild(tr);
tr = document.createElement("tr");
td = document.createElement("td");
tdText = document.createTextNode("Valor 1");
td.appendChild(tdText);
tr.appendChild(td);
td = document.createElement("td");
tdText = document.createTextNode("Valor 2");
td.appendChild(tdText);
tr.appendChild(td);
td = document.createElement("td");
tdText = document.createTextNode("Valor 3");
td.appendChild(tdText);
tr.appendChild(td);
tabla.appendChild(tr);
contenedor.appendChild(tabla);
}
window.onload = init;
Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.
Deja una respuesta