挑战：多条件“与”逻辑过滤
在网页应用中，动态过滤表格数据是常见的需求。当数据量较大时，用户往往需要根据多个条件（例如，部门和角色）来筛选结果。传统的单输入过滤或简单的“或”逻辑过滤已无法满足需求。例如，用户可能希望同时查找“市场部”且为“团队负责人”的所有员工，这就要求过滤机制能够处理多条件之间的“与”逻辑关系。
现有的一些JavaScript实现，可能仅能处理单个搜索输入，或者在尝试使用多个输入框时，错误地实现了“或”逻辑（只要满足任一条件就显示），甚至因为逻辑冲突导致无结果。本教程将提供一个纯JavaScript解决方案，实现精确的多条件“与”逻辑过滤。
HTML结构设计：为过滤准备
为了实现高效且可扩展的多条件过滤，我们需要在HTML结构中为表格和输入框进行适当的设计。
-
表格结构： 表格的部分应为每个可过滤的列定义一个data-column-name属性。这个属性将作为JavaScript中识别列的键。表格主体
中的每一行包含实际的数据单元格 。 <!-- PHP 生成的表格示例 --> <table id="myTable"> <thead> <tr> <th>ID</th> <th>姓名</th> <th data-column-name="dept">部门</th> <th data-column-name="role">角色</th> </tr> </thead> <tbody> <tr><td>1</td><td>张三</td><td>市场部</td><td>经理</td></tr> <tr><td>2</td><td>李四</td><td>销售部</td><td>主管</td></tr> <tr><td>3</td><td>王五</td><td>市场部</td><td>团队负责人</td></tr> <tr><td>4</td><td>赵六</td><td>研发部</td><td>工程师</td></tr> <tr><td>5</td><td>钱七</td><td>市场部</td><td>员工</td></tr> <tr><td>6</td><td>孙八</td><td>销售部</td><td>团队负责人</td></tr> </tbody> </table>过滤输入框： 为每个过滤维度（如部门、角色）创建一个独立的输入框。每个输入框都应包含一个data-filter-column属性，其值应与表格中对应列的data-column-name值匹配。这将帮助JavaScript将输入框与要过滤的特定列关联起来。
<div class="filter-controls"> <input type="text" class="filter-input" placeholder="按部门过滤" data-filter-column="dept"> <input type="text" class="filter-input" placeholder="按角色过滤" data-filter-column="role"> <button id="clearFilters">清除所有过滤</button> </div>JavaScript核心逻辑：实现多条件“与”过滤
我们的JavaScript逻辑将围绕三个核心功能构建：收集所有活跃的过滤器、遍历并匹配表格行，以及绑定事件监听器。
1. 收集所有活跃过滤器
当任何一个过滤输入框内容改变时，我们需要获取所有输入框的当前值，并将其与对应的过滤列关联起来。
立即学习“Java免费学习笔记（深入）”；
/** * 收集所有过滤输入框的值和对应的列名。 * @returns {Array<Object>} 包含 { column: string, value: string } 对象的数组。 */ function getFilterCriteria() { const filterInputs = document.querySelectorAll('.filter-input'); const criteria = []; filterInputs.forEach(input => { const column = input.getAttribute('data-filter-column'); const value = input.value.trim().toLowerCase(); if (column && value) { // 只有当列名和值都存在时才添加 criteria.push({ column, value }); } }); return criteria; }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代码结合起来，即可实现完整的基于多输入条件的“与”逻辑过滤功能。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript 多条件表格“与”过滤</title> <style> 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; } </style> </head> <body> <h1>员工信息过滤</h1> <div class="filter-controls"> <input type="text" class="filter-input" placeholder="按部门过滤 (如: 市场部)" data-filter-column="dept"> <input type="text" class="filter-input" placeholder="按角色过滤 (如: 团队负责人)" data-filter-column="role"> <button id="clearFilters">清除所有过滤</button> </div> <table id="myTable"> <thead> <tr> <th>ID</th> <th>姓名</th> <th data-column-name="dept">部门</th> <th data-column-name="role">角色</th> </tr> </thead> <tbody> <!-- 示例数据，实际应用中可能由PHP从数据库动态生成 --> <tr><td>1</td><td>张三</td><td>市场部</td><td>经理</td></tr> <tr><td>2</td><td>李四</td><td>销售部</td><td>主管</td></tr> <tr><td>3</td><td>王五</td><td>市场部</td><td>团队负责人</td></tr> <tr><td>4</td><td>赵六</td><td>研发部</td><td>工程师</td></tr> <tr><td>5</td><td>钱七</td><td>市场部</td><td>员工</td></tr> <tr><td>6</td><td>孙八</td><td>销售部</td><td>团队负责人</td></tr> <tr><td>7</td><td>周九</td><td>市场部</td><td>团队负责人</td></tr> <tr><td>8</td><td>吴十</td><td>销售部</td><td>经理</td></tr> </tbody> </table> <script> /** * 收集所有过滤输入框的值和对应的列名。 * @returns {Array<Object>} 包含 { column: string, value: string } 对象的数组。 */ function getFilterCriteria() { const filterInputs = document.querySelectorAll('.filter-input'); const criteria = []; filterInputs.forEach(input => { const column = input.getAttribute('data-filter-column'); const value = input.value.trim().toLowerCase(); if (column && value) { // 只有当列名和值都存在时才添加 criteria.push({ column, value }); } }); return criteria; } /** * 根据给定的过滤条件过滤表格。 */ 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');
