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.

• 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 () {

}

• 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 = funcion () {
    // 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.

• 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.

funcion 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í.

funcion 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;
}

• 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).