本文介绍使用纯 javascript 实现基于下拉菜单的表格行级过滤功能：当用户选择某字段（如 value1～value5）时，自动隐藏该列值为 0 的整行，仅保留对应列值为 1 的行，支持一键重置（“no filter”选项）。

本文介绍使用纯 javascript 实现基于下拉菜单的表格行级过滤功能：当用户选择某字段（如 value1～value5）时，自动隐藏该列值为 0 的整行，仅保留对应列值为 1 的行，支持一键重置（“no filter”选项）。

在实际业务中（例如权限管理、多选标签筛选等场景），常需根据后端返回的布尔型整数字段（0/1）动态控制表格行的可见性。本方案不依赖任何框架，仅用原生 JavaScript 即可高效完成按列值过滤整行的需求。

✅ 正确的 HTML 结构是前提

首先确保 和

结构语义清晰、标签闭合完整。特别注意：

• 移除 上冗余且无效的 onclick 属性（HTML 中 select 应监听 change 事件，而非每个 option 绑定点击）；

中，便于后续按行控制显隐。

示例结构如下：

@@######@@

内的 必须正确嵌套，且 name 与数据库字段名严格一致（如 value1）；

每行数据应包裹在

1	0	1	1	0
0	1	0	1	1

✅ 核心 JavaScript 过滤逻辑

以下脚本监听 的 change 事件，根据所选 value 查找所有匹配 name 且 value="0" 的隐藏输入框，并隐藏其所在整行（），而非仅单元格：

<select name="filter"><option value="none">No filter</option>
<option value="value1">value1</option>
<option value="value2">value2</option>
<option value="value3">value3</option>
<option value="value4">value4</option>
<option value="value5">value5</option></select>

? 关键点说明：

Expanso json-flatten

通过 CLI 或 MCP 服务器，使用 Expanso Edge 管道扁平化嵌套 JSON 对象。

下载

• 使用 row.querySelector(...) 精准定位当前行内匹配条件的 ；
• 通过 row.style.display = 'none' 隐藏整行，解决原文中“只隐藏单元格”的问题；
• "none" 值触发全量显示，实现无滤镜状态还原。

⚠️ 注意事项与最佳实践

• 性能提示：若表格行数超百，建议添加防抖或使用 DocumentFragment 批量操作 DOM；
• 服务端兼容性：此为纯前端过滤，敏感数据仍需服务端校验与权限控制；
• 无障碍访问：为 添加 aria-label，并确保键盘可操作（change 事件天然支持 Tab + Enter）；
• 扩展性增强：如需多字段联合过滤，可改用 Array.filter() + dataset 属性管理状态。

该方案简洁、可靠、零依赖，适用于 PHP + 原生 JS 混合渲染的传统项目，亦可无缝迁移至 Vue/React 中作为逻辑参考。

document.querySelector('select[name="filter"]').addEventListener('change', function(e) {
  const table = document.getElementById('data-table');
  const rows = table.querySelectorAll('tr');

  // 重置：显示所有行
  rows.forEach(row => row.style.display = '');

  // 若选择非 "none" 项，则执行过滤
  if (this.value !== 'none') {
    rows.forEach(row => {
      const targetInput = row.querySelector(`input[name="${this.value}"][value="0"]`);
      if (targetInput) {
        row.style.display = 'none'; // 隐藏整行
      }
    });
  }
});