Pokémon卡片收藏页面按钮功能异常：隐藏勾选行失效求助

你的代码存在三个核心问题，导致按钮功能失效：

1. 表头行无input元素，触发报错 #

document.getElementsByTagName("tr")会把表头的<tr>也纳入结果，这一行里没有<input>标签，调用getElementsByTagName("input")[2]时会直接抛出Cannot read properties of undefined (reading 'checked')错误，函数直接中断，后续逻辑无法执行。

2. Input索引错误 #

每个数据行里只有2个<input>，对应"Card"列的是第一个（索引为0），你用了索引[2]，超出数组范围会得到undefined，访问它的checked属性必然报错。

3. 未处理状态切换（可选优化） #

当前代码只做隐藏操作，再次点击按钮无法恢复显示所有行，交互体验不佳。

修复后的完整代码 #

JavaScript部分 #

function showUnowned() {
  var rows = document.getElementsByTagName("tr");
  // 跳过表头行，从索引1开始遍历数据行
  for (var i = 1; i < rows.length; i++) {
    // 获取当前行中"Card"列的复选框（第一个input）
    var cardCheckbox = rows[i].getElementsByTagName("input")[0];
    // 勾选Card则隐藏该行，否则显示
    rows[i].style.display = cardCheckbox.checked ? "none" : "";
  }
}

HTML部分（保持原结构即可） #

<h1>My Pokemon Card Collection</h1>
<table>
  <tr>
    <th>Picture</th>
    <th>Name</th>
    <th>Pokedex Number</th>
    <th>Card</th>
    <th>Other</th>
  </tr>
  <tr>
    <td><img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png"></td>
    <td>Bulbasaur</td>
    <td>1</td>
    <td><input type="checkbox"></td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td><img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/2.png"></td>
    <td>Ivysaur</td>
    <td>2</td>
    <td><input type="checkbox"></td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td><img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/3.png"></td>
    <td>Venusaur</td>
    <td>3</td>
    <td><input type="checkbox"></td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td><img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/4.png"></td>
    <td>Charmander</td>
    <td>4</td>
    <td><input type="checkbox"></td>
    <td><input type="checkbox"></td>
  </tr>
</table>
<button onclick="showUnowned()">Show Unowned Pokemon</button>

关键修改说明 #

• 跳过表头：循环从i=1开始，避免处理没有input的表头行。
• 修正索引：用[0]获取对应"Card"列的复选框。
• 双向切换：使用三元表达式实现状态切换，点击按钮可在“显示未拥有”和“显示全部”之间切换，提升交互体验。

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