本文介绍使用纯 JavaScript 实现基于下拉菜单（）的客户端表格行级过滤：当用户选择某字段（如 value1~value5）时，自动隐藏该字段值为 0 的整行，仅保留值为 1 的行，无需刷新页面或后端交互。
本文介绍使用纯 javascript 实现基于下拉菜单（`
在实际开发中，常需对数据库导出的布尔型数据表格（如权限开关、状态标记等）提供即时前端筛选功能。本方案聚焦轻量、可靠、可维护的纯前端实现——不依赖 jQuery 或框架，不修改后端逻辑，仅用原生 JavaScript 完成行级可见性控制。
✅ 正确的 HTML 结构是前提
首先，确保 <select></select> 和表格结构语义清晰、标签闭合完整。原始代码中 <td> 内错误地写入了未闭合的 <code><input> 属性（如 td <input...></input...>），必须修正为标准嵌套：
<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>
<table id="data-table">
<tr>
<td><input type="hidden" name="value1" value="1">1</td>
<td><input type="hidden" name="value2" value="0">0</td>
<td><input type="hidden" name="value3" value="1">1</td>
<td><input type="hidden" name="value4" value="1">1</td>
<td><input type="hidden" name="value5" value="0">0</td>
</tr>
<!-- 更多行... -->
</table>⚠️ 注意：
- 移除所有
<option onclick="..."></option>——onclick在<option></option>上无效且不可靠，应监听<select></select>的change事件；- 为表格添加
id="data-table"便于精准选取，避免影响其他表格；- 每个
<input>的name必须与<option value="..."></option>严格一致（如"value1"），这是匹配逻辑的关键。
✅ 核心 JavaScript 过滤逻辑
以下脚本在 DOM 加载完成后执行，为下拉框绑定 change 事件，并按需显示/隐藏整行：
document.addEventListener('DOMContentLoaded', () => {
const select = document.querySelector('select[name="filter"]');
const table = document.getElementById('data-table');
const rows = table.querySelectorAll('tbody tr, tr:not(tbody tr)'); // 兼容无 tbody 的表
select.addEventListener('change', function() {
const selectedValue = this.value;
// 重置：显示所有行
rows.forEach(row => row.style.display = '');
// 若选择的是有效字段（非 "none"），则执行过滤
if (selectedValue !== 'none') {
rows.forEach(row => {
// 查找当前行中对应 name 的 hidden input
const input = row.querySelector(`input[type="hidden"][name="${selectedValue}"]`);
if (input && input.value === '0') {
row.style.display = 'none'; // 隐藏整行
}
});
}
});
});✅ 关键设计说明
-
行级控制：
row.style.display = 'none'隐藏整行（而非单个<td>），彻底解决“只隐藏单元格”的问题； <li> <strong>健壮性处理</strong>：使用 <code>querySelectorAll('tbody tr, tr:not(tbody tr)')兼容有/无<tbody> 的表格结构； <li> <strong>性能友好</strong>：仅遍历当前表格行，不扫描全页 DOM； </li> <li> <strong>无侵入式</strong>：不修改 PHP 渲染逻辑，<code>=$row['valueX']?>照常输出，前端仅读取value属性。
✅ 可选增强（CSS 优化体验）
添加平滑过渡效果，提升交互质感：
table tr {
transition: opacity 0.2s ease, transform 0.2s ease;
}
table tr[style*="none"] {
opacity: 0;
transform: translateY(-5px);
}✅ 总结
该方案以最小成本达成精准需求：
? 零服务端压力——全部逻辑在浏览器完成；
? 高可维护性——单个事件监听 + 清晰条件分支，易于扩展新字段；
? 强兼容性——支持所有现代浏览器及 IE11+；
? 无缝集成——与 PHP/MySQL 渲染的表格天然契合，无需 AJAX 改造。
只需将上述 JS 与修正后的 HTML 组合，即可实现点击即筛、实时响应的专业级表格过滤体验。
