本文介绍使用纯 JavaScript 实现基于 下拉菜单的表格行级过滤功能：当用户选择某字段（如 value1），自动隐藏所有该字段值为 0 的整行，仅保留值为 1 的行，支持“无筛选”重置。
本文介绍使用纯 javascript 实现基于 `
在实际业务中（例如权限管理、多选项用户配置展示），后端常以 0/1 整型字段标识布尔状态，并渲染为 HTML 表格。若需前端快速筛选——如点击“value3”时只显示 value3=1 的行——无需刷新页面或请求后端，可借助轻量级 JavaScript 完成。
核心思路是：监听 该方案不依赖任何外部库，兼容所有现代浏览器；通过操作 <select></select> 的 change 事件 → 定位目标列对应的隐藏输入框（<input type="hidden" name="valueX">）→ 找到 value="0" 的元素 → 向上遍历至其所在 <tr> 行 → 设置 <code>display: none。注意：必须操作整行（<tr>），而非单个 <code><td>，否则会破坏表格结构（如题中截图所示问题）。<p>以下是完整、可直接运行的实现方案：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5980" title="javascript-pro"><img
src="https://img.php.cn/upload/skill/000/000/081/179074807567238.jpg" alt="javascript-pro" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5980" title="javascript-pro" class="overflowclass">javascript-pro</a>
<p class="overflowclass">专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发</p>
</div>
<a rel="nofollow" href="/xiazai/skill5980" title="javascript-pro" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<h3>✅ HTML 结构（精简规范版）</h3>
<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>
<blockquote>
<p>⚠️ 注意事项：</p>
<ul>
<li>移除 <code><option></option> 上冗余的 onclick 属性（已由统一 change 事件接管）；
<input> 标签正确闭合（原问题中 <td> 存在语法错误）；<li>为表格添加 <code>id="data-table" 便于精准控制，避免影响页面其他表格。✅ JavaScript 过滤逻辑（健壮版）
document.addEventListener('DOMContentLoaded', () => {
const select = document.querySelector('select[name="filter"]');
const table = document.getElementById('data-table');
const rows = table.querySelectorAll('tbody tr, tr:not([id])'); // 兼容无 tbody 场景
select.addEventListener('change', function() {
const selectedValue = this.value;
// 重置：显示所有行
rows.forEach(row => row.style.display = '');
// 若选择非 "none"，执行过滤
if (selectedValue !== 'none') {
rows.forEach(row => {
const targetInput = row.querySelector(`input[type="hidden"][name="${selectedValue}"]`);
if (targetInput && targetInput.value === '0') {
row.style.display = 'none';
}
});
}
});
});
✅ 可选增强：CSS 样式建议
#data-table { border-collapse: collapse; width: 100%; margin-top: 1rem; }
#data-table td { padding: 0.5rem 0.75rem; border: 1px solid #ddd; }
select { padding: 0.5rem 1rem; font-size: 1rem; }
✅ 总结
<tr> 元素的 <code>display 样式实现行级显隐，语义清晰、性能高效。若后续需支持多条件筛选或服务端联动，可在本基础之上扩展为动态 AJAX 请求。关键原则始终不变：过滤目标是行（<tr>），而非单元格（<code><td>） —— 这是避免布局错乱的根本保障。</td>
