遍历一个HTML表格元素

Question

我学习JavaScript，在学校里的功课，我们必须通过使用循环指望有多少游戏在2014年

它不会在控制台中，其中有任何回报制成我错了？

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>

Answer 1

您需要检查它的文本：

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

OR，

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

Answer 2

array[i] == 2014 

数组中的所有内容都将是HTML表格数据单元元素对象。

阵列中没有什么会是2014年人数

你需要阅读元素中的文本内容，然后比较这一点。

Answer 3

没有必要在一个HTML表做遍历元素。您可以简单地使用regular expressions到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>

Answer 4

我认为这是一个更好的办法。

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); 

评论代码用于检查单个行上的每个项目。