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:
|
1 2 3 4 5 6 7 8 9 |
function init(){ const contenedor = document.getElementById("resultado"); const tabla = document.createElement("table"); } window.onload = init; |
Ahora crearemos una fila con una etiqueta tr.
|
1 2 3 4 5 6 7 8 9 10 11 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
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.
|
1 |
tabla.setAttribute("border", "1"); |
Ahora lo vemos así:
Os dejo el ejemplo completo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
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