循环遍历 HTML 表格中的元素答案

【问题标题】：Loop through elements in a HTML table循环遍历 HTML 表格中的元素
【发布时间】：2017-02-11 01:32:58
【问题描述】：

我正在学习 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>

【问题讨论】：

你必须遍历每一行每一列。可能的参考：stackoverflow.com/questions/3065342/…
if (array[i].textContent == '2014') {

标签： javascript html arrays loops dom

【解决方案1】：

你需要检查它的文本：

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

或，

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

【讨论】：

很高兴为您提供帮助 ;)
@BhojendraNepal — 我不是那个意思.. getElementsByTagName 返回一个HTMLCollection，而不是Element.. 另请注意innerText 是Non-standard，你应该使用@987654322 @ 而不是..
无需循环遍历 HTML 表格中的元素。使用regular expressions检查我的答案
@YosvelQuintero 我同意你的观点，但我只是严格遵守 OP Code。

【解决方案2】：

无需循环遍历 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>

【讨论】：

【解决方案3】：

array[i] == 2014

数组中的所有内容都是 HTML Table Data Cell Element 对象。

数组中的任何内容都不会是数字 2014。

您需要从元素中读取文本内容，然后进行比较。

【讨论】：

【解决方案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);

注释代码用于检查单行中的每个项目。

【讨论】：