javascript dom多列动态过滤核心是：获取数据→监听输入→多字段匹配→显隐行。通过语义化html结构、防抖事件绑定、逐行模糊/数值条件匹配实现，支持重置、无结果提示等优化。
JavaScript DOM 操作实现多列数据的动态过滤筛选，核心是：获取表格/列表数据 → 监听输入（或选择）事件 → 根据多个字段条件匹配行 → 显示匹配项、隐藏不匹配项。
1. 结构准备：用语义化 HTML 组织数据
确保数据源结构清晰，推荐用 <table> 或带统一 class 的 <code><div> 列表。每行需有明确标识（如 <code>data-id），每列内容包裹在带列名 class 的子元素中，方便按列取值：
张三
北京
28
李四
上海
32
2. 绑定多列输入事件，防抖提升性能
为每个筛选输入框绑定 input 事件，使用简单防抖避免高频触发（如 300ms 延迟执行）：
Java注释规范Skills
下载
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
- 获取所有带
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() 遍历所有数据行，对每一行检查是否满足「所有非空输入框的条件」：
- 提取该行对应列的文本内容（
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 max) 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()确保初始状态一致
