基于多列复选框的表格过滤功能异常修复请求

问题分析 #

当前实现存在两个核心问题：

1. 过滤条件未执行逻辑与运算：同时勾选多组筛选条件时，行没有同时满足所有组的筛选要求，导致结果不符合预期。
2. 清空筛选后行无法完全恢复：取消所有筛选条件后，部分行仍处于隐藏状态，没有重置为显示状态。

修复方案 #

下面是修复后的完整代码，核心调整了筛选逻辑的条件判断方式，确保多组条件间的逻辑与，同时修复了筛选清空后的行状态重置问题：

HTML #

<div class="filters">
  <div class="filter-group">
    <h3>MONTH</h3>
    <label><input type="checkbox" class="filter-checkbox" data-group="month" value="MAR"> MAR</label>
    <label><input type="checkbox" class="filter-checkbox" data-group="month" value="APR"> APR</label>
    <label><input type="checkbox" class="filter-checkbox" data-group="month" value="MAY"> MAY</label>
  </div>
  <div class="filter-group">
    <h3>LANGUAGE</h3>
    <label><input type="checkbox" class="filter-checkbox" data-group="language" value="French"> French</label>
    <label><input type="checkbox" class="filter-checkbox" data-group="language" value="Spanish"> Spanish</label>
    <label><input type="checkbox" class="filter-checkbox" data-group="language" value="English"> English</label>
  </div>
  <div class="filter-group">
    <h3>HOUSE</h3>
    <label><input type="checkbox" class="filter-checkbox" data-group="house" value="None"> None</label>
    <label><input type="checkbox" class="filter-checkbox" data-group="house" value="Gryffindor"> Gryffindor</label>
    <label><input type="checkbox" class="filter-checkbox" data-group="house" value="Slytherin"> Slytherin</label>
  </div>
</div>

<table id="data-table">
  <thead>
    <tr>
      <th>Name</th>
      <th class="hidden">Month</th>
      <th class="hidden">Language</th>
      <th class="hidden">House</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td class="hidden">MAR</td>
      <td class="hidden">French</td>
      <td class="hidden">Gryffindor</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td class="hidden">MAR</td>
      <td class="hidden">Spanish</td>
      <td class="hidden">None</td>
    </tr>
    <tr>
      <td>Charlie</td>
      <td class="hidden">MAR</td>
      <td class="hidden">Spanish</td>
      <td class="hidden">Slytherin</td>
    </tr>
    <tr>
      <td>Diana</td>
      <td class="hidden">MAR</td>
      <td class="hidden">English</td>
      <td class="hidden">Gryffindor</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td class="hidden">APR</td>
      <td class="hidden">French</td>
      <td class="hidden">Slytherin</td>
    </tr>
    <tr>
      <td>Frank</td>
      <td class="hidden">MAY</td>
      <td class="hidden">English</td>
      <td class="hidden">None</td>
    </tr>
  </tbody>
</table>

CSS #

.hidden {
  display: none;
}

.filters {
  margin: 20px 0;
  display: flex;
  gap: 30px;
}

.filter-group {
  display: flex;
  flex-direction: column;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

JavaScript #

document.addEventListener('DOMContentLoaded', function() {
  const checkboxes = document.querySelectorAll('.filter-checkbox');
  const tableRows = document.querySelectorAll('#data-table tbody tr');

  checkboxes.forEach(checkbox => {
    checkbox.addEventListener('change', filterTable);
  });

  function filterTable() {
    // 收集所有选中的筛选条件，按分组整理
    const selectedFilters = {};
    checkboxes.forEach(checkbox => {
      const group = checkbox.dataset.group;
      if (!selectedFilters[group]) {
        selectedFilters[group] = [];
      }
      if (checkbox.checked) {
        selectedFilters[group].push(checkbox.value);
      }
    });

    // 过滤每一行
    tableRows.forEach(row => {
      let isMatch = true;

      // 遍历每个筛选组，只有当组有选中项时才判断
      for (const group in selectedFilters) {
        const values = selectedFilters[group];
        if (values.length === 0) continue;

        // 获取当前行对应组的列值
        const cellValue = row.querySelector(`td.hidden:nth-child(${getGroupColumnIndex(group)})`).textContent.trim();
        // 当前行必须满足该组的至少一个选中值
        if (!values.includes(cellValue)) {
          isMatch = false;
          break; // 只要有一个组不满足，直接跳出循环
        }
      }

      // 根据匹配结果设置行的显示状态
      row.style.display = isMatch ? '' : 'none';
    });
  }

  // 辅助函数：根据分组名获取对应的列索引（从1开始）
  function getGroupColumnIndex(group) {
    switch(group) {
      case 'month': return 2;
      case 'language': return 3;
      case 'house': return 4;
      default: return 0;
    }
  }
});

关键修复点说明 #

1. 筛选条件的逻辑与实现：

   • 按筛选组（MONTH、LANGUAGE、HOUSE）整理选中的条件，只有当某组有选中项时，才要求行满足该组的至少一个条件。
   • 行必须同时满足所有有选中项的组的条件，只要有一个组不满足，就隐藏该行，确保了多组条件间的逻辑与。

2. 清空筛选后的行状态重置：

   • 当所有筛选条件都取消时，selectedFilters中每个组的数组长度都是0，此时所有行的isMatch都会设为true，行的display状态重置为默认值（显示），解决了部分行无法恢复的问题。

3. 列索引的精准匹配：

   • 通过辅助函数getGroupColumnIndex确保每个筛选组对应表格中正确的隐藏列，避免了列索引错误导致的筛选失效。

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