挑战：多条件“与”逻辑过滤
在网页应用中，动态过滤表格数据是常见的需求。当数据量较大时，用户往往需要根据多个条件（例如，部门和角色）来筛选结果。传统的单输入过滤或简单的“或”逻辑过滤已无法满足需求。例如，用户可能希望同时查找“市场部”且为“团队负责人”的所有员工，这就要求过滤机制能够处理多条件之间的“与”逻辑关系。
现有的一些JavaScript实现，可能仅能处理单个搜索输入，或者在尝试使用多个输入框时，错误地实现了“或”逻辑（只要满足任一条件就显示），甚至因为逻辑冲突导致无结果。本教程将提供一个纯JavaScript解决方案，实现精确的多条件“与”逻辑过滤。
HTML结构设计：为过滤准备
为了实现高效且可扩展的多条件过滤，我们需要在HTML结构中为表格和输入框进行适当的设计。
-
表格结构： 表格的zuojiankuohaophpcnthead>部分应为每个可过滤的列定义一个data-column-name属性。这个属性将作为JavaScript中识别列的键。表格主体<tbody>中的每一行<tr>包含实际的数据单元格<td>。
<!-- 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属性，其值应与表格<thead>中对应列的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'); 
