5

La finalidad es generar una tabla dinámicamente. He visto que puedo hacerlo de varias maneras, pero por su simplicidad queria simplemente generar una ristra (una lista) de textos con todo el código HTML que generará la tabla.

La idea es la siguiente:

document.getElementById('divTabla').innerHTML = "<table><tr><th>Partido</th><th>Resultado</th></tr></table>";
<div id="divTabla"></div>

También he probado con comillas dobles, no sé si es importante:

document.getElementById("divTabla").innerHTML = "<table><tr><th>Partido</th><th>Resultado</th></tr></table>";
<div id="divTabla"></div>

Como he dicho, el código es más amplio, pero he intentado reducirlo a la mínima expresion, como en el ejemplo de arriba y aún así no funciona.

1
  • Usa jquery $( "#divTabla" ).append( "<p>Test</p>" );
    – Jorge Luis
    el 31 ene. 2020 a las 5:05

3 respuestas 3

9

Puedes hacerlo de manera muy sencilla, solo tienes que ponerle un poco de lógica y orden a las cosas:

Primero, si lo quieres es poner la información en una tabla, te recomiendo que tratés de ahorrarte código js, por ejemplo, poniendo ya la tabla directamente en el HTML y además, que uses siempre la estructura HTML que usé yo para este ejemplo como base de los archivos HTML.

Segundo, te recomiendo (como buena práctica y casi ley) que el archivo .js lo adjuntes al final del archivo HTML para que no te genere ningún error.

El código final de los dos archivos quedaría de la siguiente manera:

// Algunos datos de ejemplo que pueden ser traidos de una base de datos o API
const DATOS = [
    { nombres: 'Diego Antonio', apellidos: 'Platero Escobar', edad: 19, nacionalidad: 'Colombia' },
    { nombres: 'Eduardo José', apellidos: 'Saravia García', edad: 25, nacionalidad: 'Honduras' },
    { nombres: 'Andrea Ester', apellidos: 'Moreno Esquivel', edad: 17, nacionalidad: 'El Salvador' },
    { nombres: 'Rebeca Andrea', apellidos: 'Pinto Castro', edad: 27, nacionalidad: 'Argentina' }
];

// Obteniendo el cuerpo de la tabla a donde añadiremos nuestros datos
let tableBody = document.getElementById('tbody');

// Recorriendo los datos de ejemplo
for (let i = 0; i < DATOS.length; i++) {
    // Creando los 'td' que almacenará cada parte de la información del usuario actual
    let name = `<td>${DATOS[i].nombres}</td>`;
    let lastName = `<td>${DATOS[i].apellidos}</td>`;
    let age = `<td>${DATOS[i].edad} años</td>`;
    let country = `<td>${DATOS[i].nacionalidad}</td>`;

    tableBody.innerHTML += `<tr>${name + lastName + age + country}</tr>`;
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Práctica 6.2</title>
</head>
<body>
    <div id="divTabla">
        <table>
            <thead>
                <tr>
                    <th>Nombres</th>
                    <th>Apellidos</th>
                    <th>Edad</th>
                    <th>Nacionalidad</th>
                </tr>
            </thead>
            <tbody id="tbody">
    
            </tbody>
        </table>
    </div>
    
    <script src="doc.js" type="text/javascript"></script>
</body>
</html>

Cualquier pregunta, en los comentarios.

2
  • Gracias por tu respuesta! Voy a trabajar sobre lo que me aconsejas.
    – Calfa
    el 31 ene. 2020 a las 11:38
  • ¡De nada y buena suerte! el 8 feb. 2020 a las 17:30
1

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>

0

En completo como estás modificando el DOM

Dado que los eventos scroll pueden ejecutarse a un ritmo elevado, el event handler no debería ejecutar operaciones computacionalmente costosas como modificaciones en el DOM.

Esto también es válido con el uso del ciclo For

https://developer.mozilla.org/es/docs/Web/API/Document/scroll_event

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.