JavaScript DOM多列动态过滤核心是：获取数据→监听输入→多字段匹配→显隐行。通过语义化HTML结构、防抖事件绑定、逐行模糊/数值条件匹配实现，支持重置、无结果提示等优化。
JavaScript DOM 操作实现多列数据的动态过滤筛选，核心是：获取表格/列表数据 → 监听输入（或选择）事件 → 根据多个字段条件匹配行 → 显示匹配项、隐藏不匹配项。
1. 结构准备：用语义化 HTML 组织数据
确保数据源结构清晰，推荐用 <table> 或带统一 class 的 <div> 列表。每行需有明确标识（如 data-id），每列内容包裹在带列名 class 的子元素中，方便按列取值：
<table id="data-table">
<thead>
<tr>
<th><input type="text" placeholder="姓名" data-col="name"></th>
<th><input type="text" placeholder="城市" data-col="city"></th>
<th><input type="text" placeholder="年龄" data-col="age"></th>
</tr>
</thead>
<tbody>
<tr data-id="1">
<td class="col-name">张三</td>
<td class="col-city">北京</td>
<td class="col-age">28</td>
</tr>
<tr data-id="2">
<td class="col-name">李四</td>
<td class="col-city">上海</td>
<td class="col-age">32</td>
</tr>
</tbody>
</table>
2. 绑定多列输入事件，防抖提升性能
为每个筛选输入框绑定 input 事件，使用简单防抖避免高频触发（如 300ms 延迟执行）：
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
- 获取所有带
data-col的输入框 - 为每个输入框添加事件监听，收集当前各列的筛选关键词
- 调用统一的
filterRows()函数
const inputs = document.querySelectorAll('input[data-col]');
let filterTimer;
inputs.forEach(input => {
input.addEventListener('input', () => {
clearTimeout(filterTimer);
filterTimer = setTimeout(() => filterRows(), 300);
});
});
3. 多列匹配逻辑：逐行比对，支持模糊+数值范围（可选）
filterRows() 遍历所有数据行，对每一行检查是否满足「所有非空输入框的条件」：
立即学习“Java免费学习笔记（深入）”；
- 提取该行对应列的文本内容（
row.querySelector('.col-name').textContent） - 对「姓名」「城市」等字符串列，用
includes()或toLowerCase().includes()做模糊匹配 - 对「年龄」等数字列，可额外支持区间写法（如
"25-30"）或大于/小于符号（">30"），用正则解析后判断 - 只要某列有输入但当前行不满足，就跳过该行
function filterRows() {
const filters = {};
inputs.forEach(input => {
const col = input.dataset.col;
const val = input.value.trim();
if (val) filters[col] = val;
});
const rows = document.querySelectorAll('#data-table tbody tr');
rows.forEach(row => {
let match = true;
for (const [col, keyword] of Object.entries(filters)) {
const cell = row.querySelector(`.col-${col}`);
if (!cell) continue;
let cellText = cell.textContent.trim();
// 年龄列支持数值判断
if (col === 'age') {
const num = parseInt(cellText, 10);
if (isNaN(num)) continue;
if (keyword.includes('-')) {
const [min, max] = keyword.split('-').map(Number);
if (num < min || num > max) match = false;
} else if (keyword.startsWith('>')) {
if (num <= parseInt(keyword.slice(2))) match = false;
} else if (keyword.startsWith('<')) {
if (num >= parseInt(keyword.slice(2))) match = false;
} else {
if (num !== parseInt(keyword)) match = false;
}
} else {
// 字符串列：忽略大小写包含匹配
if (!cellText.toLowerCase().includes(keyword.toLowerCase())) {
match = false;
}
}
}
row.style.display = match ? '' : 'none';
});
}
4. 补充体验优化点
让筛选更自然、更可控：
- 清空任一输入框时，自动重新计算——上面逻辑已天然支持（空字符串不参与过滤）
- 添加「重置筛选」按钮：
inputs.forEach(i => i.value=''); filterRows(); - 无结果时显示提示行：
document.querySelector('#no-result')?.remove();+ 插入提示<tr id="no-result"><td colspan="3">未找到匹配数据</td></tr> - 首次加载可加
filterRows()确保初始状态一致
