基于JavaScript实现表格复选框筛选功能的问题求助

一、基础结构搭建 #

先完成核心HTML布局，包含可筛选的表格和默认隐藏的筛选面板：

<table id="dataTable">
  <thead>
    <tr>
      <th class="filterable" data-column="0">姓名</th>
      <th class="filterable" data-column="1">部门</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>张三</td><td>技术部</td></tr>
    <tr><td>李四</td><td>市场部</td></tr>
    <tr><td>王五</td><td>技术部</td></tr>
    <tr><td>赵六</td><td>人事部</td></tr>
  </tbody>
</table>

<!-- 筛选面板 -->
<div id="filterPanel" style="display:none; position:absolute; border:1px solid #ccc; padding:10px; background:white; z-index:999;">
  <input type="text" id="filterInput" placeholder="搜索选项...">
  <div id="checkboxContainer" style="margin:10px 0; max-height:150px; overflow-y:auto;"></div>
  <button id="filterOk">OK</button>
  <button id="filterCancel">取消</button>
</div>

二、点击列标题弹出筛选面板 #

通过JS监听列标题点击事件，提取当前列的唯一值生成复选框，并定位显示面板：

const filterableHeaders = document.querySelectorAll('.filterable');
const filterPanel = document.getElementById('filterPanel');
const checkboxContainer = document.getElementById('checkboxContainer');
const filterCancel = document.getElementById('filterCancel');
let currentColumnIndex = -1;

// 绑定列标题点击事件
filterableHeaders.forEach(header => {
  header.addEventListener('click', () => {
    currentColumnIndex = parseInt(header.dataset.column);
    // 获取当前列的所有唯一值
    const columnCells = document.querySelectorAll(`#dataTable tbody tr td:nth-child(${currentColumnIndex + 1})`);
    const uniqueValues = [...new Set(Array.from(columnCells).map(cell => cell.textContent.trim()))];
    
    // 生成复选框列表
    checkboxContainer.innerHTML = '';
    uniqueValues.forEach(val => {
      const checkboxItem = document.createElement('div');
      checkboxItem.innerHTML = `<label style="display:block; margin:4px 0;"><input type="checkbox" value="${val}"> ${val}</label>`;
      checkboxContainer.appendChild(checkboxItem);
    });
    
    // 定位面板到标题下方
    const headerRect = header.getBoundingClientRect();
    filterPanel.style.top = `${headerRect.bottom + window.scrollY}px`;
    filterPanel.style.left = `${headerRect.left + window.scrollX}px`;
    filterPanel.style.display = 'block';
    // 清空搜索框并显示所有复选框
    document.getElementById('filterInput').value = '';
    showAllCheckboxes();
  });
});

// 取消按钮隐藏面板
filterCancel.addEventListener('click', () => {
  filterPanel.style.display = 'none';
});

// 显示所有复选框的辅助函数
function showAllCheckboxes() {
  checkboxContainer.querySelectorAll('div').forEach(item => {
    item.style.display = 'block';
  });
}

三、文本框实时过滤复选框 #

监听输入框输入事件，根据关键词筛选显示对应的复选框：

const filterInput = document.getElementById('filterInput');
filterInput.addEventListener('input', () => {
  const keyword = filterInput.value.toLowerCase();
  const checkboxItems = checkboxContainer.querySelectorAll('div');
  
  checkboxItems.forEach(item => {
    const text = item.textContent.toLowerCase();
    item.style.display = text.includes(keyword) ? 'block' : 'none';
  });
});

四、OK按钮执行表格筛选 #

获取选中的复选框值，匹配表格行并控制显示/隐藏：

const filterOk = document.getElementById('filterOk');
const tableRows = document.querySelectorAll('#dataTable tbody tr');

filterOk.addEventListener('click', () => {
  const selectedValues = Array.from(checkboxContainer.querySelectorAll('input:checked')).map(input => input.value);
  
  tableRows.forEach(row => {
    const cellValue = row.querySelector(`td:nth-child(${currentColumnIndex + 1})`).textContent.trim();
    // 无选中值时显示所有行，否则只显示匹配行
    row.style.display = selectedValues.length === 0 || selectedValues.includes(cellValue) ? 'table-row' : 'none';
  });
  
  filterPanel.style.display = 'none';
});

常见问题排查 #

• 确认列标题的data-column属性与列索引（从0开始）对应，nth-child选择器需加1（因为CSS选择器从1开始计数）。
• 检查事件绑定是否生效：可在事件回调中加console.log验证触发情况。
• 确保表格行的display属性使用table-row而非block，避免破坏表格布局。

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