Desarrollo Web Lección 4 - Tablas
- Matrices multidimensionales de Javascript

Desarrollo Web Lección 4 - Tablas

Matrices multidimensionales de Javascript

Objetivo

Continuaremos construyendo nuestra tabla de estadísticas sobre el equipo de Colombia, pero lo haremos de manera más eficiente con javascript usando matrices y bucles.

Configuración

Cree un archivo llamado 'equipo.html' en su directorio 'proyecto'.
Configure la plantilla usando 'html:5' y 'link:css' en el encabezado.
También agregue un archivo Javascript usando 'script:src' y srcconfigúrelo en 'equipo.js', luego cree el archivo 'equipo.js'.
Cree la tabla y agregue la fila de encabezado.

equipo.html

    <table>
        <thead>
            <tr>
                <th>Nombre</th>
                <th>Apellido</th>
                <th>Nacionalidad</th>
                <th class="edad">Edad</th>
                <th>POsición</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

Copie el CSS relevante de 'style.css' en su directorio principal a 'style.css' en el directorio de su proyecto.

style.css

td, th {
  border-width: 1px;
  border-style: solid;
}

td {
  padding: 10px;
}

table {
  border-collapse: collapse;
}

#carlos {
  font-style: italic;
}

.age {
  background-color: yellow;
}

#carlos .age {
  font-weight: 900;
}

td.age {
  font-size: 150%;
}

Agregue el siguiente código a 'equipo.js' para que nuestro código solo se ejecute cuando la página esté lista.

equipo.js

window.onload = function () {

}

Matrices

Así como una lista se puede representar mediante una matriz en Javascript, una tabla (que es una lista de listas) se puede representar como una matriz de matrices. Primero configuremos una sola fila.
Cada fila es una lista/matriz que contiene información sobre un solo jugador.

window.onload = function () {
    // generar datos del jugador
    jugador = ['David', 'Ospina Ramirez', 'Colombia', 33, 'Portero'];
}

Ahora vamos a mostrar la lista.

    // crea texto de fila
    statsRow = "<tr>";
    statsRow += "<td>" + jugador[0] + "</td>";
    statsRow += "<td>" + jugador[1] + "</td>";
    statsRow += "<td>" + jugador[2] + "</td>";
    statsRow += "<td>" + jugador[3] + "</td>";
    statsRow += "<td>" + jugador[4] + "</td>";
    statsRow += "</tr>";

Espero que esto te resulte familiar. Hicimos algo muy similar al crear una lista en Javascript.
Estamos creando una larga cadena de código en una variable de texto llamada 'statsRow'.
El texto contiene el código de una fila que incluye todas las etiquetas apropiadas <tr> y </td> los datos del jugador.
jugador[] hace referencia a los datos en la lista llamada 'jugador'.
Ahora que la cadena está lista, podemos agregarla a la tabla.

    // agregar fila a la tabla
    tableBody = document.getElementsByTagName("tbody")[0];
    newRow = tableBody.insertRow(0);
    newRow.innerHTML = statsRow;

También debe reconocer este código.
La primera línea (después del comentario) muestra el elemento con el etiqueta <tbody> que se asigna a la variable 'tableBody'.
Luego insertamos una nueva fila en la posición 0 (inmediatamente después de la etiqueta <tbody>) de nuestro elemento tableBody y lo asignamos a una variable llamada 'newRow'.
En la línea final de este código, llenamos nuestra nueva fila con newRow la cadena de texto que creamos anteriormente.
Veamos el código completo hasta ahora.

window.onload = function () {
    // generar datos
    jugador = ['David', 'Ospina Ramirez', 'Colombia', 33, 'Portero'];

    // crea texto de fila
    statsRow = "<tr>";
    statsRow += "<td>" + jugador[0] + "</td>";
    statsRow += "<td>" + jugador[1] + "</td>";
    statsRow += "<td>" + jugador[2] + "</td>";
    statsRow += "<td>" + jugador[3] + "</td>";
    statsRow += "<td>" + jugador[4] + "</td>";
    statsRow += "</tr>";

    // agregar fila a la tabla
    tableBody = document.getElementsByTagName("tbody")[0];
    newRow = tableBody.insertRow(0);
    newRow.innerHTML = statsRow;
}

Eso es mucho trabajo para solo mostrar una línea, pero no tenemos que pasar por lo mismo cada vez.

Funciones

Queremos usar la sección 'crear texto de fila' varias veces (una para cada jugador), así que vamos a moverla a su propia función Javascript.
Una función es un bloque de código que se puede llamar haciendo clic en un botón o desde cualquier otro lugar del código Javascript. ¿Recuerdas que hicimos esto para nuestras listas de verificación en la lección anterior?
Agregue esta función debajo del código existente.

funcion crearTextoFila() {
    
}

Ahora mueva el bloque 'crear texto de fila' dentro de su nueva función.

function crearTextoFila() {
    statsRow = "<tr>";
    statsRow += "<td>" + jugador[0] + "</td>";
    statsRow += "<td>" + jugador[1] + "</td>";
    statsRow += "<td>" + jugador[2] + "</td>";
    statsRow += "<td>" + jugador[3] + "</td>";
    statsRow += "<td>" + jugador[4] + "</td>";
    statsRow += "</tr>";
}

En este punto, la función no sabe qué playeres y el código principal no tendrá acceso a statsRow.
Agregue playerbetween ()para decirle al código original que necesitamos esta información.
Agregue una nueva línea al final con return statsRow; para devolver la cadena al código principal. Ahora debería verse así.

function crearTextoFila(jugador) {
    statsRow = "<tr>";
    statsRow += "<td>" + jugador[0] + "</td>";
    statsRow += "<td>" + jugador[1] + "</td>";
    statsRow += "<td>" + jugador[2] + "</td>";
    statsRow += "<td>" + jugador[3] + "</td>";
    statsRow += "<td>" + jugador[4] + "</td>";
    statsRow += "</tr>";
    return statsRow;
}

Matrices Multidimensionales

Realmente queremos que nuestro programa funcione con todos nuestros jugadores. Así que tenemos una lista de jugadores, cada uno con una lista de estadísticas. En otras palabras, tenemos una matriz de matrices o una matriz multidimensional. Comencemos con los datos que ya conocemos.
Primero, actualicemos nuestra sección 'generar datos' para mostrar una matriz de matrices (lista de listas).

    jugadores = [
        ['David', 'Ospina Ramírez', 'Colombia', 33, 'Portero'],
        ['Carlos', 'Eccehomo Cuesta Figueroa', 'Colombia', 22, 'Defensa'],
        ['Juan Guillermo', 'Cuadrado Bello', 'Colombia', 33, 'Centrocampista'],
        ['Radamel Falcao', 'García Zárate', 'Colombia', 35, 'Delantero']
              ];

Tenga en cuenta que cada línea es un elemento en la lista más grande, por lo que los separamos por ,.
El único ; está al final de toda la declaración.
Entonces estamos diciendo que tenemos una matriz de matrices (lista de listas) llamada jugadores.
Queremos mostrar a cada jugador por turno, por lo que necesitamos datos de 'jugadores[0]', 'jugadores[1]', 'jugadores[2] y 'jugadores[3]'. En lugar de escribir cada uno de estos a su vez, podemos usar un bucle javascript de la siguiente manera.

    // crear texto
    for (j = 0; j <jugadores.length; j++) {

    }

¿Recuerdas esto de cuando creaste una lista usando Javascript? Hemos reemplazado 'i' con 'j' . Estamos ejecutando el código desde el jugador 1 (j = 0) hasta llegar al último jugador (j < jugadores.length) incrementando cada vez (j++) para llegar a todos los jugadores.
Antes de continuar, verifiquemos que tenemos la información correcta.
Agregue una línea dentro del bucle for de la siguiente manera.

        console.log(j);

Esto imprimirá el valor de 'j' en la consola, que es una herramienta que le permite interactuar con el código javascript en la página.
Abra su código 'team.html' en Live Server, que aún debería mostrar la fila del encabezado de la tabla.
Ahora abra sus Herramientas de desarrollador (haga clic en el menú en la parte superior derecha, luego seleccione 'Más herramientas' y 'Herramientas de desarrollador') y cambie al panel 'Consola'.
Comprueba que tiene impresos (en verde) los valores del 0 al 3. Si no, mira si puedes averiguar por qué. No dude en pedir ayuda.
Vayamos un paso más allá y cambiemos j a jugadores[j] cuáles deberían ser los datos de cada jugador.
Verifique la consola nuevamente (actualice la página si es necesario) y debería ver 4 matrices, cada una con una lista de datos del jugador. Eso nos dice que tenemos los datos correctos listos para usar.
Ahora, para cada jugador, necesitamos crear statsRow como para un solo jugador.
Ya tenemos una función que hace esto, así que llamémosla.

        // crea texto de fila
        statsRow = crearTextoFila(jugadores[j]);

Mantuvimos el nombre de la variable 'statsRow' porque se ajusta a nuestro código para agregar a la tabla, pero esta es una variable diferente a la que está dentro de la función. El que está dentro de la función solo funciona dentro de la función (su 'alcance' es la función).
createRowText(jugadores[j]) llama a la función 'createRowText' y le proporciona los datos pertenecientes al jugador actual como vimos en la Consola.
Si revisa la página nuevamente ahora, solo mostrará el último jugador porque estamos sobrescribiendo los datos del jugador cada vez que llamamos a la función (statsRow = createRowText(jugadores[j])reasignaciones 'statsRow').
Vamos a mover el bloque de código 'agregar fila a la tabla' dentro del 'bucle for' para mostrar cada fila cuando los datos estén listos (y antes de que los perdamos).

    for (j = 0; j <jugadores.length; j++) {
        console.log(jugadores[j]);
        // crea texto de fila
        statsRow = createRowText(jugadores[j]);

        // agregar fila a la tabla
        tableBody = document.getElementsByTagName("tbody")[0];
        newRow = tableBody.insertRow(0);
        newRow.innerHTML = statsRow;
    }

Ejecute el código ahora y verá que todavía no está del todo bien. Todos los jugadores están listados, pero el orden es al revés.
Esto se debe a que siempre agregamos la nueva fila en la ranura superior por encima de todo lo demás (.insertRow[0]).
Queremos que el número de fila aumente al mismo tiempo que los datos del jugador.

        newRow = tableBody.insertRow(j);

Hay un último cambio que hacer. 'tableBody' nunca cambia, por lo que no hay necesidad de reasignarlo cada vez que pasamos por el bucle. Muevamos esa línea sobre el bucle para que se calcule primero y nunca más.
Nuestro código final se ve así.

window.onload = funcion () {
    // generar datos
    jugadores = [
        ['David', 'Ospina Ramírez', 'Colombia', 33, 'Portero'],
        ['Carlos', 'Eccehomo Cuesta Figueroa', 'Colombia', 22, 'Defensa'],
        ['Juan Guillermo', 'Cuadrado Bello', 'Colombia', 33, 'Centrocampista'],
        ['Radamel Falcao', 'García Zárate', 'Colombia', 35, 'Delantero']
              ];

    tableBody = document.getElementsByTagName("tbody")[0];

    // mostrar datos
    for (j = 0; j <jugadores.length; j++) {
        // console.log(jugadores[j]);
        // crea texto de fila
        statsRow = createRowText(jugadores[j]);

        // agregar fila a la tabla
        newRow = tableBody.insertRow(j);
        newRow.innerHTML = statsRow;
    }
}

función crearTextoFila(jugador) {
    statsRow = "<tr>";
    statsRow += "<td>" + jugador[0] + "</td>";
    statsRow += "<td>" + jugador[1] + "</td>";
    statsRow += "<td>" + jugador[2] + "</td>";
    statsRow += "<td>" + jugador[3] + "</td>";
    statsRow += "<td>" + jugador[4] + "</td>";
    statsRow += "</tr>";
    return statsRow;
}

Esto parece mucho más eficiente ahora, pero aún puede pensar que es más fácil crear la tabla en HTML que en Javascript. Está bien. ¿Qué tal si usamos el equipo completo? ¿Te imaginas armar la mesa con 26 jugadores? ¿Qué sucede si está utilizando datos con miles de entradas? Crear la matriz es mucho más fácil.

Final Code

Siguiente: Ejercicios

Table of Contents