Como crear una tabla con DOM en Javascript

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.

Compartir

Deja una respuesta

Tu dirección de correo electrónico no será publicada.