本文介绍使用纯 javascript 实现基于下拉菜单的表格行级过滤功能：当用户选择某字段（如 value1～value5）时，自动隐藏该列值为 0 的整行，仅保留对应列值为 1 的行，支持一键重置（“no filter”选项）。
本文介绍使用纯 javascript 实现基于下拉菜单的表格行级过滤功能：当用户选择某字段（如 value1～value5）时，自动隐藏该列值为 0 的整行，仅保留对应列值为 1 的行，支持一键重置（“no filter”选项）。
在实际业务中（例如权限管理、多选标签筛选等场景），常需根据后端返回的布尔型整数字段（0/1）动态控制表格行的可见性。本方案不依赖任何框架，仅用原生 JavaScript 即可高效完成按列值过滤整行的需求。
✅ 正确的 HTML 结构是前提
首先确保 <select></select> 和 <table> 结构语义清晰、标签闭合完整。特别注意：<ul>
<li>移除 <code><option></option> 上冗余且无效的 onclick 属性（HTML 中 select 应监听 change 事件，而非每个 option 绑定点击）；
<td> 内的 <code><input type="hidden"> 必须正确嵌套，且 name 与数据库字段名严格一致（如 value1）；<tr> 中，便于后续按行控制显隐。<p>示例结构如下：</p>
<pre class="brush:php;toolbar:false;"><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></pre>
<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>
<tr>
<td>
<input type="hidden" name="value1" value="0">0</td>
<td>
<input type="hidden" name="value2" value="1">1</td>
<td>
<input type="hidden" name="value3" value="0">0</td>
<td>
<input type="hidden" name="value4" value="1">1</td>
<td>
<input type="hidden" name="value5" value="1">1</td>
</tr>
<!-- 更多行... -->
</table>
<h3>✅ 核心 JavaScript 过滤逻辑</h3>
<p>以下脚本监听 <code><select></select> 的 change 事件，根据所选 value 查找所有匹配 name 且 value="0" 的隐藏输入框，并隐藏其所在整行（<tr>），而非仅单元格：<pre class="brush:php;toolbar:false;">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'; // 隐藏整行
}
});
}
});</pre>
<blockquote>
<p>? <strong>关键点说明</strong>： </p>
<ul>
<li>使用 <code>row.querySelector(...) 精准定位当前行内匹配条件的 <input>； row.style.display = 'none' 隐藏整行，解决原文中“只隐藏单元格”的问题； "none" 值触发全量显示，实现无滤镜状态还原。⚠️ 注意事项与最佳实践
-
性能提示：若表格行数超百，建议添加防抖或使用
DocumentFragment批量操作 DOM； - 服务端兼容性：此为纯前端过滤，敏感数据仍需服务端校验与权限控制；
-
无障碍访问：为
<select></select>添加aria-label，并确保键盘可操作（change事件天然支持 Tab + Enter）； -
扩展性增强：如需多字段联合过滤，可改用
Array.filter()+dataset属性管理状态。
该方案简洁、可靠、零依赖，适用于 PHP + 原生 JS 混合渲染的传统项目，亦可无缝迁移至 Vue/React 中作为逻辑参考。
