JavaScript读取HTML表格：隐藏非2016年游戏行的循环报错问题

看起来你遇到的核心问题是获取表格元素的方式错误，以及后续遍历逻辑的小问题，我来一步步帮你理清：

首先定位错误根源 #

你控制台显示"Table Found"但随后报错Cannot read property 'length' of undefined，原因有两个：

1. getElementsByClassName的参数错误：你写的是document.getElementsByClassName(table)，这里的table是未定义的变量，应该传入字符串类名"table"。
2. 未正确获取单个表格元素：getElementsByClassName返回的是HTMLCollection（类数组对象），哪怕页面只有一个带table类的表格，也要通过索引[0]取出单个表格元素，否则这个集合本身没有rows属性，自然会报错。

修正后的完整代码实现 #

我帮你把代码修正并补全了隐藏非2016年游戏的逻辑，假设表格里的年份列是最后一列（你可以根据实际列索引调整）：

<script>
function GameSearchLoop() {
  // 1. 修正获取表格的方式：加引号+取第一个元素
  var tables = document.getElementsByClassName("table");
  if (tables.length === 0) {
    console.log("Table Not Found");
    return; // 没找到就直接退出函数
  }
  var table = tables[0];
  console.log("Table Found");

  // 2. 遍历表格行（注意跳过表头行，如果有的话）
  var rowLength = table.rows.length;
  // 假设第一行是表头，从索引1开始遍历；如果没有表头就从0开始
  for (var z = 1; z < rowLength; z++) {
    var row = table.rows[z];
    // 假设年份在最后一列（索引为 cells.length -1），你可以根据实际调整索引
    var yearCell = row.cells[row.cells.length - 1];
    var year = yearCell.textContent.trim(); // 去除空格避免干扰

    // 3. 判断年份并控制行的显示/隐藏
    if (year === "2016") {
      row.style.display = ""; // 显示行
    } else {
      row.style.display = "none"; // 隐藏行
    }
    console.log(`Row ${z} checked, year: ${year}`);
  }
}
</script>

额外优化建议 #

• 可以用querySelector(".table")替代getElementsByClassName("table")[0]，语法更简洁，直接返回单个元素：

  var table = document.querySelector(".table");
  if (!table) {
    console.log("Table Not Found");
    return;
  }
  

• 如果你的表格有<thead>和<tbody>，建议直接遍历<tbody>里的行，避免误操作表头：

  var tbody = table.querySelector("tbody");
  var rows = tbody.rows;
  for (var z = 0; z < rows.length; z++) {
    // 遍历逻辑...
  }
  

现在点击按钮触发GameSearchLoop函数，应该就能正常筛选出2016年的游戏行啦！

内容的提问来源于stack exchange，提问作者Demonic218