Loop through elements in a HTML table

Question

I am learning Javascript, in a school assignment we have to by using a loop count how many games was made in 2014.

It does not return anything in the console, where have I gone wrong?

var allGames = document.getElementsByTagName('td');
var array = Array.prototype.slice.call(allGames, 0)
var games14 = 0;
for (var i = 0; i < array.length; ++i) {
  if (array[i] == 2014) {
    games14++;
    console.log(games14)
  }
}

<table id="games">
  <thead>
    <tr>
      <th>Titel</th>
      <th>Genre</th>
      <th>Årstal</th>
    </tr>
  </thead>
  <tbody id="games_tbody">
    <tr class="horror">
      <td class="title">Outlast</td>
      <td>Horror</td>
      <td>2013</td>
    </tr>
    <tr class="rpg">
      <td class="title">Dragon Age: Inquisition</td>
      <td>Role-playing Game</td>
      <td>2014</td>
    </tr>
    <tr class="rpg">
      <td class="title">Skyrim</td>
      <td>Role-playing Game</td>
      <td>2011</td>
    </tr>
    <tr class="horror">
      <td class="title">Amnesia: The Dark Descent</td>
      <td>Horror</td>
      <td>2010</td>
    </tr>
    <tr class="simulator">
      <td class="title">Scania Truck Driving Simulator</td>
      <td>Simulator</td>
      <td>2012</td>
    </tr>
    <tr class="horror">
      <td class="title">Five Nights at Freddy’s</td>
      <td>Horror</td>
      <td>2014</td>
    </tr>
    <tr class="simulator">
      <td class="title">Sims 4</td>
      <td>Simulator</td>
      <td>2014</td>
    </tr>
    <tr class="rts" id="last">
      <td class="title">Warcraft III: Reign of Chaos</td>
      <td>Real-time Strategy</td>
      <td>2002</td>
    </tr>
  </tbody>
</table>

You have to go through each row and column. Possible ref: http://stackoverflow.com/questions/3065342/how-do-i-iterate-through-table-rows-and-cells-in-javascript — Sri, Oct 03 '16 at 06:56

Bhojendra Rauniyar · Answer 1 · 2016-10-03T07:14:54.273

5

You need to check for its text:

var allGames = document.getElementsByTagName('td');
...
 if (array[i].innerHTML == '2014') {

OR,

if(array[i].innerText == '2014' || array[i].textContent == '2014'){

edited Oct 03 '16 at 07:14

answered Oct 03 '16 at 06:56

Bhojendra Rauniyar

73,156
29
131
187

Glad to help you ;) – Bhojendra Rauniyar Oct 03 '16 at 07:04
@BhojendraNepal — I did not mean that.. `getElementsByTagName` returns an `HTMLCollection`, not `Element`.. Also note that `innerText` is [__Non-standard__](https://developer.mozilla.org/en-US/docs/Web/API/Node/innerText), you should be using [___`textContent`___](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) instead.. – Rayon Oct 03 '16 at 07:11
No need to do loop through elements in a HTML table.. Check my answer with [regular expressions](https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions) – Yosvel Quintero Arguelles Oct 03 '16 at 07:28
@YosvelQuintero I agree with you but I'm just answering strictly to the OP Code. – Bhojendra Rauniyar Oct 03 '16 at 07:29

Yosvel Quintero Arguelles · Answer 2 · 2016-10-03T07:26:50.543

No need to do Loop through elements in a HTML table.. You can simply use regular expressions to count all occurrences within the games_tbody:

var games14 = document
  .getElementById('games_tbody')
  .innerText
  .match(/2014/g)
  .length;

console.log('Games made in 2014:', games14);

<table id="games">
  <thead>
    <tr><th>Titel</th><th>Genre</th><th>Årstal</th></tr>
  </thead>
  <tbody id="games_tbody">
    <tr class="horror"><td class="title">Outlast</td><td>Horror</td><td>2013</td></tr>
    <tr class="rpg"><td class="title">Dragon Age: Inquisition</td><td>Role-playing Game</td><td>2014</td></tr>
    <tr class="rpg"><td class="title">Skyrim</td><td>Role-playing Game</td><td>2011</td></tr>
    <tr class="horror"><td class="title">Amnesia: The Dark Descent</td><td>Horror</td><td>2010</td></tr>
    <tr class="simulator"><td class="title">Scania Truck Driving Simulator</td><td>Simulator</td><td>2012</td></tr>
    <tr class="horror"><td class="title">Five Nights at Freddy’s</td><td>Horror</td><td>2014</td></tr>
    <tr class="simulator"><td class="title">Sims 4</td><td>Simulator</td><td>2014</td></tr>
    <tr class="rts" id="last"><td class="title">Warcraft III: Reign of Chaos</td><td>Real-time Strategy</td><td>2002</td></tr>
  </tbody>
</table>

score 1 · Answer 3 · answered Oct 03 '16 at 06:56

1

array[i] == 2014

Everything in the array will be an HTML Table Data Cell Element object.

Nothing in the array will be the Number 2014.

You need to read the text content from the element and then compare that.

answered Oct 03 '16 at 06:56

Quentin

800,325
104
1,079
1,205

score 1 · Answer 4 · answered Oct 03 '16 at 07:30

I think this is a better way.

var table = document.getElementById("games");
count = 0;
for (let i = 0; row = table.rows[i]; i++) {
    if (row.cells[2].innerHTML === "2014"){
        count++;
    }
/*
    for (let j = 0; col = row.cells[j]; j++) {
        if (col.innerHTML === "2014"){
            count++;
        }
    }
*/ 
}
console.log(count);

The commented code is for checking every item on a single row.

Loop through elements in a HTML table

4 Answers4