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.

Etiquetas

Deja un comentario

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