We'll continue building our table of stats on the Colombia team, but we'll do it more efficiently with javascript by using arrays and loops.

• We'll start with the work done in the previous class on https://jsfiddle.net, but we'll delete all the code inside the <tbody> tag. ie. delete all the data and leave only the heading.

HTML

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Surname</th>
      <th>Nationality</th>
      <th class="age">Age</th>
      <th>Position</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

CSS

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

td {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}

table {
  border-collapse: collapse;
}

#carlos {
  font-style: italic;
}

.age {
  background-color: yellow;
}

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

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

• Think of an array as a list.
• In Javascript, an array is designated by []
• In our example, each line (each player's data) is a list so we could represent Ospina Ramirez' data as an array. Copy this into the Javascript panel.

ospinaRemirez = ['David', 'Ospina Ramirez', 'Colombia', 33, 'Portero'];

• Let's take a look at this statement in detail.
• The first word 'ospinaRemirez' is a variable named 'ospinaRemirez'. It is a place to store information. We can name variables almost anything we like, but convention is to begin with a lowercase and make the first letter of subsequent words uppercase.
• The = means we are assigning a value to the variable 'ospinaRemirez'.
• The first thing we see after the = is [ so the value must be an array.
• The array contains 5 items separated by , and ends with ].
• Every Javascript statement must end with ;.
• Now let's display the list.

statsRow  = "<td>" + ospinaRamirez[0] + "</td>";

• After creating the array, on line 2, we create a string (text) called statsRow. You can tell it's a string because of the " symbols.
• The string contains all the text for a data cell, but instead of writing out the player's name, we refer to the information inside the array called 'ospinaRamirez'.
• Remember that in computer progams, the first element is counted as 0, so the name is referred to as ospinaRamirez[0].
• Notice that the strings are joined by using the + symbol.

statsRow  = statsRow + "<td>" + ospinaRamirez[1] + "</td>";

• In the third line, we join the new string to the old one. statsRow (new string) = statsRow (old string) + additional elements.

statsRow += "<td>" + ospinaRamirez[2] + "</td>";
statsRow += "<td>" + ospinaRamirez[3] + "</td>";
statsRow += "<td>" + ospinaRamirez[4] + "</td>";

• From the fourth line on, we simplify this to be new string += additional elements, but it means the same thing. We could have written the third line the same way, but it's good to see the different options so you can choose one you like.

// add row to table

• Now, add a blank line to show we're starting something a bit different. The next line begins with // which means it's a comment. It tells us what the next bit of the program does, but your computer doesn't read this information. We now know that the next section of code is meant to add the row to our table.

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

• The following line shows another variable being assigned a value. The value is an element with tag name <tbody> in the document (which is our page).
• There may be more than one table (and therefore more than one <tbody> in the page, so getElementsByTagName returns a list and we need to identify which item in the list we want. In this case, it's the first so we use [0].
• We then assign that element to a variable called tableBody so we can refer to it in subsequent lines of code.

newRow    = tableBody.insertRow(0);

• Here we insert a new row at position 0 (immediately after the <tbody> tag) of our tableBody element.
• We then assign it to a variable called newRow

newRow.innerHTML = statsRow;

• In the final line of this code, we select our new row with newRow.
• .innerHTML refers to the HTML code inside the element before the ., so we're now talking about the code inside our new row.
• We then use = so we're going to assign something to the new row.
• In this case, it's statsRow which is the string containing all the data cells.
• So this line pulls it all together to say 'put the string with our data into the new row of <tbody>.
• Let's look at the complete code so far.

ospinaRamirez = ['David', 'Ospina Ramirez', 'Colombia', 33, 'Portero'];
statsRow  = "<td>" + ospinaRamirez[0] + "</td>";
statsRow += "<td>" + ospinaRamirez[1] + "</td>";
statsRow += "<td>" + ospinaRamirez[2] + "</td>";
statsRow += "<td>" + ospinaRamirez[3] + "</td>";
statsRow += "<td>" + ospinaRamirez[4] + "</td>";

// add row to table
tableBody = document.getElementsByTagName("tbody")[0];
newRow    = tableBody.insertRow(0);
newRow.innerHTML = statsRow;