Solución que usa appendChild
Primero creamos el array con cada celda de la tabla. Este array tiene otros arrays dentro, uno para cada fila:
var array_tabla = [
[ "Partido" , "Resultado" ]
,[ "River - Boca" , "1 - 0" ]
]
Nota: Se le pone una coma (,
) al principio de cada fila, menos en la primer fila.
Para lograr generar la tabla a partir del array, usamos map
, document.createElement
y appendChild
.
Creamos la etiqueta table
y la agregamos al div
:
- Se crea la la etiqueta
table
: var tabla = document.createElement("table")
- Se la agrega al
div
: document.getElementById("divTabla").appendChild(tabla)
Opcionalmente le agregamos borde a la tabla, en este caso usaré el mínimo borde, que es 1:
tabla.border = 1
Se recorre el array array_tabla
mediante map
:
array_tabla.map(function(x){
// Aquí agregaremos las filas y las celdas.
})
Creamos las filas y las agregamos a la tabla:
- Creamos las filas:
var tr = document.createElement("tr")
- Las agregamos a la tabla:
tabla.appendChild(tr)
Recorremos cada fila mediante map
, cada fila se llama x
y el texto de la celda se llama y
:
x.map(function(y){
// Aquí agregamos cada celda "y" a cada fila "x".
})
Creamos una etiqueta th
para la celda y la agregamos a la fila tr
:
- Creamos la celda:
var th = document.createElement("th")
.
- La agregamos a la fila
tr
: tr.appendChild(th)
.
Por último agregamos el texto y
a la celda th
: th.innerHTML = y
Código completo:
var array_tabla = [
[ "Partido" , "Resultado" ]
,[ "River - Boca" , "1 - 0" ]
]
var tabla = document.createElement("table")
tabla.border = 1
array_tabla.map(function(x){
var tr = document.createElement("tr")
x.map(function(y){
var th = document.createElement("th")
th.innerHTML = y
tr.appendChild(th)
})
tabla.appendChild(tr)
})
document.getElementById("divTabla").appendChild(tabla)
<div id="divTabla"></div>
Alternativa usando innerHTML
Hacemos una función que fabrica la etiqueta en texto plano:
function crear(etiqueta,atributos,centro){
var resultado = "<" + etiqueta
resultado += atributos? " " + atributos : ""
centro_procesado = Array.isArray(centro)?centro.join(""):centro
resultado += ">" + centro_procesado + "</" + etiqueta + ">"
console.log( resultado )
return resultado
}
Los parámetros son, etiqueta
, atributos
y centro
. Probamos lo siguiente:
crear("table","border=1","centro")
El resultado es:
<table border=1>centro</table>
Si en cambio, el centro
es un array, se une cada elemento del array. Esta vez probaremos sin atributos, entonces le pasamos false
. Se prueba lo siguiente:
crear("tr",false, [ "Uno", "Dos" ] )
El resultado será:
<tr>UnoDos</tr>
Para crear la tabla entera hacemos esto:
var tabla = crear("table","border=1",
array_tabla.map(x=>crear("tr",false,
x.map(y=>crear("th",false,y))
))
)
document.querySelector("#divTabla").innerHTML = tabla
Veamos cómo se va construyendo la tabla, empezamos desde el final y vamos hacia el principio:
3.2 Generar las celdas. crear("th",false,y)
<th>Partido</th>
y <th>Resultado</th>
<th>River - Boca</th>
y <th>1 - 0</th>
3.1. Se unen las celdas:
<th>Partido</th><th>Resultado</th>
<th>River - Boca</th><th>1 - 0</th>
2.2. Se envuelve cada fila en tr
, es decir, crear("tr",false,
<tr><th>Partido</th><th>Resultado</th></tr>
<tr><th>River - Boca</th><th>1 - 0</th></tr>
2.1. Uniendo las filas:
<tr><th>Partido</th><th>Resultado</th></tr><tr><th>River - Boca</th><th>1 - 0</th></tr>
1.2. Envolviendo en un table
(la tabla con bordes): crear("table","border=1",
<table border=1><tr><th>Partido</th><th>Resultado</th></tr><tr><th>River - Boca</th><th>1 - 0</th></tr></table>
1.1. Por último, se lo asigna al div
:
document.querySelector("#divTabla").innerHTML = tabla
Código completo usando innerHTML
:
var array_tabla = [ [ "Partido" , "Resultado" ]
,[ "River - Boca" , "1 - 0" ] ]
function crear(etiqueta,atributos,centro){
var resultado = "<" + etiqueta
resultado += atributos? " " + atributos : ""
centro_procesado = Array.isArray(centro)?centro.join(""):centro
resultado += ">" + centro_procesado + "</" + etiqueta + ">"
console.log( resultado )
return resultado
}
var tabla = crear("table","border=1",
array_tabla.map(x=>crear("tr",false,
x.map(y=>crear("th",false,y))
))
)
document.querySelector("#divTabla").innerHTML = tabla
<div id="divTabla"></div>