Uno de los componentes visuales más cómodos al momento de cargar información que proviene de una base de datos son las tablas, las cuales nos facilitan una estructura y organización de nuestra información, normalmente cuando desarrollamos aplicaciones realizamos consultas a la base de datos y llenamos tablas en HTML haciendo uso del mismo lenguaje de programación utilizado de lado del servidor (Por lo general PHP), pero no todas las veces es así, en ocasiones podemos cargar los valores en nuestras tablas valiéndonos de JavaScript, con el fin de evitar la recarga de nuestro navegador, veamos un ejemplo práctico:
Como llenar tabla HTML JavaScript
Creando una tabla HTML:
Teniendo esta estructura de una tabla muy básica:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <button id="btnCagar">Cargar</button> <table style="width:100%" border="1" id="tabla"> <tr> <th>ID</th> <th>Nombres</th> <th>Apellidos</th> </tr> <tr> <td>001</td> <td>Jhon</td> <td>Doe</td> </tr> <tr> <td>002</td> <td>Maria</td> <td>Doe</td> </tr> </table> </body> </html>
Si ejecutamos la página anterior obtendremos una tabla con dos registros, por ende si deseamos llenarla debemos ir añadiendo (Íterando) más líneas:
<tr> <td>003</td> <td>Ericka</td> <td>Doe</td> </tr>
¡Sigamos con JavaScript!, primero que todo simulemos que el resultado de nuestra consulta a la base de datos nos está devolviendo una respuesta en JSON:
var datos = [
{
"id": "1",
"nombres": "MARIA",
"apellidos": "RUIZ"
},
{
"id": "2",
"nombres": "KARL",
"apellidos": "MARX"
},
{
"id": "3",
"nombres": "BILL",
"apellidos": "GATES"
},
{
"id": "4",
"nombres": "LOLA",
"apellidos": "LIZ"
}
];
Este JSON lo podemos devolver desde PHP, para este ejemplo utilizaremos solo una variable (Termina siendo igual).
Ahora nuestro código JavaScript:
var d = '<tr>'+
'<th>ID</th>'+
'<th>Nombres</th>'+
'<th>Apellidos</th>'+
'</tr>';
$("#btnCagar").click(function () {
for (var i = 1; i < datos.length; i++) {
d+= '<tr>'+
'<td>'+datos[i].id+'</td>'+
'<td>'+datos[i].nombres+'</td>'+
'<td>'+datos[i].apellidos+'</td>'+
'</tr>';
}
$("#tabla").append(d);
});
Aquí lo que hacemos es ir armando nuestra tabla HTML desde JavaScript al pulsar el botón «Cargar«, con una variable que le asignamos las cabeceras de la misma, luego solo vamos agregando más registros haciendo uso de un ciclo for, el cual va íterando dependiendo de la cantidad de objetos que contenga nuestro JSON, por último solo pasamos mediante la función append de JQuery todo el HTML a la tabla.
Nota: Recordar hacer referencia a la librería de JQuery.