本教程详细介绍了如何使用纯JavaScript实现HTML表格的动态过滤功能，特别侧重于处理多个搜索输入条件之间的“与”逻辑关系。通过构建清晰的HTML结构和优化JavaScript过滤算法，即使面对部门和角色等多个筛选维度，也能确保表格数据精准匹配所有指定条件，提升用户交互体验，且无需依赖jQuery。
挑战：多条件“与”逻辑过滤
在网页应用中，动态过滤表格数据是常见的需求。当数据量较大时，用户往往需要根据多个条件（例如，部门和角色）来筛选结果。传统的单输入过滤或简单的“或”逻辑过滤已无法满足需求。例如，用户可能希望同时查找“市场部”且为“团队负责人”的所有员工，这就要求过滤机制能够处理多条件之间的“与”逻辑关系。
现有的一些JavaScript实现，可能仅能处理单个搜索输入，或者在尝试使用多个输入框时，错误地实现了“或”逻辑（只要满足任一条件就显示），甚至因为逻辑冲突导致无结果。本教程将提供一个纯JavaScript解决方案，实现精确的多条件“与”逻辑过滤。
HTML结构设计：为过滤准备
为了实现高效且可扩展的多条件过滤，我们需要在HTML结构中为表格和输入框进行适当的设计。
表格结构：表格的
部分应为每个可过滤的列定义一个data-column-name属性。这个属性将作为JavaScript中识别列的键。表格主体中的每一行包含实际的数据单元格。
| ID | 姓名 | 部门 | 角色 |
|---|---|---|---|
| 1 | 张三 | 市场部 | 经理 |
| 2 | 李四 | 销售部 | 主管 |
| 3 | 王五 | 市场部 | 团队负责人 |
| 4 | 赵六 | 研发部 | 工程师 |
| 5 | 钱七 | 市场部 | 员工 |
| 6 | 孙八 | 销售部 | 团队负责人 |
过滤输入框：为每个过滤维度（如部门、角色）创建一个独立的输入框。每个输入框都应包含一个data-filter-column属性，其值应与表格
中对应列的data-column-name值匹配。这将帮助JavaScript将输入框与要过滤的特定列关联起来。JavaScript核心逻辑：实现多条件“与”过滤
我们的JavaScript逻辑将围绕三个核心功能构建：收集所有活跃的过滤器、遍历并匹配表格行，以及绑定事件监听器。
1. 收集所有活跃过滤器
当任何一个过滤输入框内容改变时，我们需要获取所有输入框的当前值，并将其与对应的过滤列关联起来。
立即学习“Java免费学习笔记（深入）”；
/** * 收集所有过滤输入框的值和对应的列名。 * @returns {Array
2. 遍历并匹配表格行
这是过滤的核心部分。它将遍历表格的每一行，并对每一行应用所有收集到的过滤条件。只有当一行满足所有条件时，它才会被显示。
/** * 根据给定的过滤条件过滤表格。 */function filterTable() { const table = document.getElementById('myTable'); if (!table) return; const filterCriteria = getFilterCriteria(); const rows = table.querySelectorAll('tbody tr'); const headerCells = table.querySelectorAll('thead th'); // 构建列名到索引的映射，以便根据data-filter-column快速找到列 const columnIndexMap = {}; headerCells.forEach((th, index) => { const colName = th.getAttribute('data-column-name'); if (colName) { columnIndexMap[colName] = index; } }); rows.forEach(row => { let rowMatchesAllFilters = true; // 假设行匹配所有过滤器 if (filterCriteria.length === 0) { // 如果没有过滤条件，则显示所有行 row.style.display = ''; return; } // 遍历所有过滤条件，执行“与”逻辑 for (const criterion of filterCriteria) { const filterColumnName = criterion.column; const filterValue = criterion.value; const columnIndex = columnIndexMap[filterColumnName]; // 如果过滤列名无效或未映射到表格列，则认为不匹配 if (columnIndex === undefined) { rowMatchesAllFilters = false; break; } const cell = row.cells[columnIndex]; if (!cell || !cell.textContent.toLowerCase().includes(filterValue)) { rowMatchesAllFilters = false; // 只要有一个条件不匹配，则整行不匹配 break; } } row.style.display = rowMatchesAllFilters ? '' : 'none'; });}
3. 绑定事件监听
我们需要在页面加载完成后，为所有过滤输入框绑定input事件，并在清除按钮上绑定click事件。
/** * 初始化过滤功能，绑定事件监听器。 */function initTableFilter() { const filterInputs = document.querySelectorAll('.filter-input'); filterInputs.forEach(input => { input.addEventListener('input', filterTable); }); const clearButton = document.getElementById('clearFilters'); if (clearButton) { clearButton.addEventListener('click', () => { filterInputs.forEach(input => input.value = ''); // 清空所有输入框 filterTable(); // 重新过滤，显示所有内容 }); }}// 页面加载完成后执行初始化document.addEventListener('DOMContentLoaded', initTableFilter);
完整示例代码
将上述HTML结构和JavaScript代码结合起来，即可实现完整的基于多输入条件的“与”逻辑过滤功能。
JavaScript 多条件表格“与”过滤 body { font-family: Arial, sans-serif; margin: 20px; } .filter-controls { margin-bottom: 20px; } .filter-input { padding: 8px; margin-right: 10px; border: 1px solid #ccc; border-radius: 4px; } #clearFilters { padding: 8px 15px; background-color: #f44336; color: white; border: none; border-radius: 4px; cursor: pointer; } #clearFilters:hover { background-color: #d32f2f; } table { width: 100%; border-collapse: collapse; margin-top: 20px; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } tr:nth-child(even) { background-color: #f9f9f9; }员工信息过滤
| ID | 姓名 | 部门 | 角色 |
|---|---|---|---|
| 1 | 张三 | 市场部 | 经理 |
| 2 | 李四 | 销售部 | 主管 |
| 3 | 王五 | 市场部 | 团队负责人 |
| 4 | 赵六 | 研发部 | 工程师 |
| 5 | 钱七 | 市场部 | 员工 |
| 6 | 孙八 | 销售部 | 团队负责人 |
| 7 | 周九 | 市场部 | 团队负责人 |
| 8 | 吴十 | 销售部 | 经理 |
以上就是实现基于多输入条件的JavaScript表格“与”逻辑过滤的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1293915.html
微信扫一扫 
支付宝扫一扫 
