挑战：多条件“与”逻辑过滤
在网页应用中，动态过滤表格数据是常见的需求。当数据量较大时，用户往往需要根据多个条件（例如，部门和角色）来筛选结果。传统的单输入过滤或简单的“或”逻辑过滤已无法满足需求。例如，用户可能希望同时查找“市场部”且为“团队负责人”的所有员工，这就要求过滤机制能够处理多条件之间的“与”逻辑关系。
现有的一些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 {Array2. 遍历并匹配表格行
这是过滤的核心部分。它将遍历表格的每一行，并对每一行应用所有收集到的过滤条件。只有当一行满足所有条件时，它才会被显示。
/** * 根据给定的过滤条件过滤表格。 */ 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 多条件表格“与”过滤 员工信息过滤
ID 姓名 部门 角色 1 张三 市场部 经理 2 李四 销售部 主管 3 王五 市场部 团队负责人 4 赵六 研发部 工程师 5 钱七 市场部 员工 6 孙八 销售部 团队负责人 7 周九 市场部 团队负责人 8 吴十 销售部 经理 更多相关专题
js获取数组长度的方法在js中，可以利用array对象的length属性来获取数组长度，该属性可设置或返回数组中元素的数目，只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值，也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容，供大家免费下载使用。
557
2023.06.20
js刷新当前页面js刷新当前页面的方法：1、reload方法，该方法强迫浏览器刷新当前页面，语法为“location.reload([bForceGet]) ”；2、replace方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，不能通过“前进”和“后退”来访问已经被替换的URL，语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容
395
2023.07.04
js四舍五入js四舍五入的方法：1、tofixed方法，可把 Number 四舍五入为指定小数位数的数字；2、round() 方法，可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容
756
2023.07.04
js删除节点的方法js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。
478
2023.09.01
JavaScript转义字符JavaScript中的转义字符是反斜杠和引号，可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容，供大家免费下载体验。
474
2023.09.04
js生成随机数的方法js生成随机数的方法有：1、使用random函数生成0-1之间的随机数；2、使用random函数和特定范围来生成随机整数；3、使用random函数和round函数生成0-99之间的随机整数；4、使用random函数和其他函数生成更复杂的随机数；5、使用random函数和其他函数生成范围内的随机小数；6、使用random函数和其他函数生成范围内的随机整数或小数。
1051
2023.09.04
如何启用JavaScriptJavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍：1、内联脚本是将JavaScript代码直接嵌入到HTML标签中；2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中；3、外部脚本是将JavaScript代码放置在一个独立的文件；4、外部脚本是将JavaScript代码放置在一个独立的文件。
659
2023.09.12
Js中Symbol类详解javascript中的Symbol数据类型是一种基本数据类型，用于表示独一无二的值。Symbol的特点：1、独一无二，每个Symbol值都是唯一的，不会与其他任何值相等；2、不可变性，Symbol值一旦创建，就不能修改或者重新赋值；3、隐藏性，Symbol值不会被隐式转换为其他类型；4、无法枚举，Symbol值作为对象的属性名时，默认是不可枚举的。
554
2023.09.20
更多热门下载
更多相关下载
更多精品课程
相关推荐/热门推荐/最新课程更多最新文章
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
