如何通过JavaScript实现表格行的添加与移除，替换原有的显示隐藏逻辑

嗨，我完全get到你的需求啦——之前是靠切换display属性来控制表格行的显示和隐藏，现在想改成勾选复选框时把对应行添加到表格里，取消勾选就移除这些行对吧？

这里需要注意一个关键点：直接移除行的话，之后再想加回来就找不到原始数据了，所以我们得先把所有行的备份存好，这样后续操作才有依据。下面是具体的优化方案：

核心思路 #

• 提前备份表格里的所有数据行（除了表头），保留原始数据
• 监听复选框的change事件（比input事件更适合复选框状态变化）
• 根据复选框的勾选状态，决定添加对应行还是移除对应行
• 给表格加上<tbody>标签，让数据行的操作更清晰

优化后的完整代码 #

HTML部分（新增tbody标签） #

<div id="input">
  <label>显示/隐藏值为1的行 :<input class="option1" type="checkbox" value="1" checked/></label>
</div>
<table id="listingTable">
  <thead>
    <tr>
      <th>Number</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody id="tableBody">
    <tr>
      <td class="check1">1</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td class="check1">2</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td class="check1">1</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
  </tbody>
</table>

JavaScript部分 #

// 页面加载时备份所有原始数据行
const tableBody = document.getElementById('tableBody');
const originalRows = Array.from(tableBody.querySelectorAll('tr'));

function handleFilterChange(event, filterClass) {
  const checkbox = event.target;
  const targetValue = checkbox.value.toLowerCase();

  if (checkbox.checked) {
    // 勾选时：先把非目标行（值不为1的行）加回表格（确保它们一直显示）
    originalRows.forEach(row => {
      const cellValue = row.querySelector(`.${filterClass}`).textContent.toLowerCase();
      if (cellValue !== targetValue && !tableBody.contains(row)) {
        tableBody.appendChild(row);
      }
    });
    // 再把目标行（值为1的行）加回表格
    originalRows.forEach(row => {
      const cellValue = row.querySelector(`.${filterClass}`).textContent.toLowerCase();
      if (cellValue === targetValue && !tableBody.contains(row)) {
        tableBody.appendChild(row);
      }
    });
  } else {
    // 取消勾选时：移除所有值为1的行
    // 兼容旧浏览器的写法（不用:has()选择器）
    const currentRows = Array.from(tableBody.querySelectorAll('tr'));
    currentRows.forEach(row => {
      const cell = row.querySelector(`.${filterClass}`);
      if (cell && cell.textContent.toLowerCase() === targetValue) {
        row.remove();
      }
    });
  }
}

// 给复选框绑定事件
document.querySelectorAll('.option1')
  .forEach(input => input.addEventListener('change', (e) => handleFilterChange(e, "check1")));

代码细节说明 #

1. 原始行备份：originalRows数组保存了所有数据行的副本，这样不管怎么移除，我们都能从备份里找回对应的行
2. 事件选择：用change事件监听复选框状态，比input事件更精准，因为复选框只有状态切换时才会触发
3. 勾选逻辑：先确保非目标行始终显示，再添加目标行，避免其他行被误移除
4. 兼容处理：如果你的项目需要兼容旧浏览器，我们避开了CSS :has()选择器，改用循环判断的方式来找到要移除的行
5. 可扩展性：如果以后要加更多筛选条件，只需要修改filterClass参数和添加对应的复选框，代码可以直接复用

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