▷ Mostrar datos de tabla HTML mediante Javascript [SOLUCIONADO]

Manipulación y visualización de datos en tablas con JavaScript

Cuando hablamos de mostrar y manipular datos en una tabla HTML a través de JavaScript, nos referimos a una tarea bastante común en el desarrollo web. La gestión dinámica de datos en estructuras tabulares no solo permite una mejor visualización de la información, sino que también facilita la interacción del usuario con dichos datos.

Uno de los primeros pasos al trabajar con este tipo de datos es crear una tabla en HTML que servirá como base para la inserción de la información mediante JavaScript. Veamos cómo sería una estructura de tabla básica sin datos:

<table id="miTabla">
    <thead>
        <tr>
            <th>Nombre</th>
            <th>Apellido</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        
    </tbody>
</table>

Para poblar la tabla con datos, tenemos varias opciones en JavaScript. La más directa es insertar los elementos del DOM uno por uno, así:

var miTabla = document.getElementById('miTabla').getElementsByTagName('tbody')[0];

// Supongamos que tenemos el siguiente array de datos
var datos = [
    { nombre: 'Juan', apellido: 'Pérez', email: '[email protected]' },
    { nombre: 'Ana', apellido: 'Gómez', email: '[email protected]' },
    // Más datos...
];

// Iteramos sobre el array de datos para añadirlos a la tabla
datos.forEach(function(persona) {
    var fila = miTabla.insertRow();
    fila.insertCell().textContent = persona.nombre;
    fila.insertCell().textContent = persona.apellido;
    fila.insertCell().textContent = persona.email;
});

Sin embargo, a medida que trabajamos con conjuntos de datos más grandes o necesitamos realizar operaciones más complejas como filtrado, ordenación o paginación, puede volverse más eficiente manejar la modificación del DOM de otras maneras. Una de ellas es construyendo una cadena de texto con el markup HTML y luego asignándola en una sola operación al contenido interno de la sección tbody de nuestra tabla:

// Continuando con el ejemplio anterior...

// Creamos una función que genera el HTML de las filas
function generarFilasHTML(datos) {
    return datos.map(function(persona) {
        return '<tr>' +
                    '<td>' + persona.nombre + '</td>' +
                    '<td>' + persona.apellido + '</td>' +
                    '<td>' + persona.email + '</td>' +
                '</tr>';
    }).join('');
}

// Asignamos el HTML generado al cuerpo de la tabla
miTabla.innerHTML = generarFilasHTML(datos);

Al trabajar con grandes cantidades de datos, es importante tener en cuenta el rendimiento y la eficiencia. Una técnica que puede mejorar esto significativamente es el uso de fragmentos de documento (DocumentFragment), que permite construir un subtree de elementos y manipularlo todo en conjunto antes de adjuntar el contenedor al DOM actual. A continuación, un ejemplo de cómo llevarlo a cabo:

// Usando la misma estructura de datos...

// Creamos un DocumentFragment
var fragment = document.createDocumentFragment();

datos.forEach(function(persona) {
    var fila = document.createElement('tr');
    
    var celdaNombre = document.createElement('td');
    celdaNombre.textContent = persona.nombre;
    fila.appendChild(celdaNombre);
    
    var celdaApellido = document.createElement('td');
    celdaApellido.textContent = persona.apellido;
    fila.appendChild(celdaApellido);
    
    var celdaEmail = document.createElement('td');
    celdaEmail.textContent = persona.email;
    fila.appendChild(celdaEmail);
    
    // Añadimos la fila creada al fragmento
    fragment.appendChild(fila);
});

// Y finalmente, añadimos el fragmento completo al DOM en una sola operación
miTabla.appendChild(fragment);

Es importante notar que al usar JavaScript para manipular datos en tablas HTML, existen múltiples librerías y frameworks que ofrecen soluciones más avanzadas y optimizadas para estas tareas. Bibliotecas como jQuery, DataTables, o frameworks como Angular, React, y Vue pueden proporcionar funcionalidades como filtrado, paginación, y ordenación de manera muy eficiente y con menor cantidad de código escrito manualmente.

Aquellas con un enfoque más programático y moderno, buscan adoptar estrategias como la virtualización del DOM o el two-way data binding para mantener la sincronía entre los datos y su representación visual sin escribir explícitamente las operaciones de inserción y actualización del DOM como se hizo en los ejemplos anteriores.

En definitiva, JavaScript ofrece diversas técnicas para la manipulación dinámica de tablas HTML, y la elección del método más adecuado dependerá de las necesidades específicas del proyecto, la cantidad de datos a gestionar y la experiencia deseada por el usuario. Es esencial conocer estas herramientas y técnicas, ya que forman parte fundamental del conjunto de habilidades de cualquier desarrollador web moderno.