理解现有代码的局限性
在web开发中，我们经常需要对表格数据进行筛选，以帮助用户快速定位所需信息。当表格数据由php从数据库中获取并渲染到html页面后，客户端的筛选功能通常通过javascript实现。然而，如果现有javascript代码仅支持单个搜索输入框或在处理多个输入时采用“or”逻辑，那么在需要“and”逻辑（即所有条件都必须满足）的多条件筛选场景下，就会遇到挑战。
例如，原始代码可能存在以下问题：
- 单值限制： searchVal1 变量只能存储一个搜索值。当用户输入“marketing, team lead”时，它被视为一个整体字符串进行匹配，而非两个独立的条件。
- 全局文本匹配： row.textContent.toLowerCase().indexOf(sVal1) > -1 语句尝试在整个行文本内容中查找匹配项。如果用户期望按“部门”和“角色”分别筛选，这种全局匹配方式无法区分不同列的内容，也无法实现多个独立条件的组合匹配。
- 缺乏AND逻辑： 当尝试使用多个输入框时，如果代码没有明确实现，结果往往是“OR”逻辑，即只要满足任一条件就显示，而不是所有条件都满足才显示。
为了实现用户期望的“部门为 marketing 并且 角色为 team lead”的精确筛选，我们需要重新设计JavaScript逻辑，使其能够识别多个独立的筛选条件，并将它们应用于表格的特定列，最终通过“AND”逻辑进行组合判断。
实现多条件筛选的核心思路
要实现基于多条件输入的表格筛选，并确保是“AND”逻辑，我们需要遵循以下核心思路：
- 明确输入与列的关联： 为每个筛选输入框指定其对应的表格列。这可以通过HTML的data-*属性（例如data-column-index）来实现，将输入框与表格中的特定列索引关联起来。
- 监听所有筛选输入： 无论哪个筛选输入框发生变化，都应触发一次完整的表格筛选操作。
- 收集所有活动的筛选条件： 在每次筛选操作开始时，遍历所有筛选输入框，收集非空的筛选值及其对应的列索引。
- 逐行进行多条件匹配： 遍历表格的每一行。对于每一行，检查它是否满足所有收集到的筛选条件。如果行中的对应列文本包含所有筛选值，则该行匹配成功。
- 应用AND逻辑： 只有当一行满足所有非空筛选条件时，才将其显示；否则，将其隐藏。
构建HTML结构
首先，我们需要一个由PHP生成的基础HTML表格，以及用于筛选的输入框。每个输入框都应通过data-column-index属性明确指定其关联的列（基于0的索引）。
立即学习“PHP免费学习笔记（深入）”；
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PHP表格多条件筛选</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
input[type="text"] { padding: 8px; margin-right: 10px; border: 1px solid #ccc; border-radius: 4px; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
th { background-color: #f2f2f2; }
</style>
</head>
<body>
<h1>员工信息筛选</h1>
<div>
<!-- 筛选输入框，通过 data-column-index 关联到表格列 -->
<input type="text" id="idFilter" placeholder="按ID筛选" data-column-index="0">
<input type="text" id="nameFilter" placeholder="按姓名筛选" data-column-index="1">
<input type="text" id="deptFilter" placeholder="按部门筛选" data-column-index="2">
<input type="text" id="roleFilter" placeholder="按角色筛选" data-column-index="3">
<button id="clearFilters">清除筛选</button>
</div>
<table id="employeeTable">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>部门</th>
<th>角色</th>
</tr>
</thead>
<tbody>
<!-- 以下内容通常由PHP从数据库动态生成 -->
<tr>
<td>101</td>
<td>张三</td>
<td>市场部</td>
<td>团队负责人</td>
</tr>
<tr>
<td>102</td>
<td>李四</td>
<td>销售部</td>
<td>销售经理</td>
</tr>
<tr>
<td>103</td>
<td>王五</td>
<td>市场部</td>
<td>产品专员</td>
</tr>
<tr>
<td>104</td>
<td>赵六</td>
<td>人事部</td>
<td>团队负责人</td>
</tr>
<tr>
<td>105</td>
<td>钱七</td>
<td>研发部</td>
<td>高级工程师</td>
</tr>
<tr>
<td>106</td>
<td>孙八</td>
<td>销售部</td>
<td>销售代表</td>
</tr>
</tbody>
</table>
<script>
// JavaScript 代码将在这里
</script>
</body>
</html>在上述HTML中：
- 我们创建了四个输入框，分别用于筛选ID、姓名、部门和角色。
- 每个输入框都有一个data-column-index属性，其值对应表格中列的0-based索引。例如，部门列是第三列，所以data-column-index="2"。
- employeeTable是我们的目标表格，其内容假设由PHP生成。
编写JavaScript筛选逻辑
接下来是实现筛选功能的JavaScript代码。我们将使用纯JavaScript，不依赖任何库。
<script>
(function() {
const table = document.getElementById('employeeTable');
// 如果表格不存在，则提前退出
if (!table) {
console.error("Table with ID 'employeeTable' not found.");
return;
}
const tbody = table.querySelector('tbody');
// 如果表格体不存在，也退出
if (!tbody) {
console.error("Table body not found in 'employeeTable'.");
return;
}
const rows = tbody.rows; // 获取所有行，这是一个HTMLCollection
// 选取所有带有 data-column-index 属性的输入框
const filterInputs = document.querySelectorAll('input[data-column-index]');
const clearButton = document.getElementById('clearFilters');
/**
* 执行表格筛选操作的函数
*/
function filterTable() {
const activeFilters = []; // 存储所有活动的筛选条件
// 遍历所有筛选输入框，收集非空的筛选值及其对应的列索引
filterInputs.forEach(input => {
const columnIndex = parseInt(input.dataset.columnIndex, 10); // 获取列索引
const value = input.value.trim().toLowerCase(); // 获取并处理输入值（去空格，转小写）
if (!isNaN(columnIndex) && value) { // 确保列索引有效且输入值不为空
activeFilters.push({ columnIndex, value });
}
});
// 如果没有活动的筛选条件，则显示所有行并退出
if (activeFilters.length === 0) {
Array.from(rows).forEach(row => {
row.style.display = ''; // 显示行
});
return;
}
// 遍历表格的每一行，进行匹配判断
Array.from(rows).forEach(row => {
let isMatch = true; // 假设当前行匹配所有条件
// 遍历所有活动的筛选条件，检查当前行是否满足所有条件
for (const filter of activeFilters) {
const cell = row.cells[filter.columnIndex]; // 获取当前条件对应的单元格
// 如果单元格存在且其文本内容包含筛选值，则继续检查下一个条件
if (cell && cell.textContent.toLowerCase().includes(filter.value)) {
// 条件满足，继续
} else {
// 任何一个条件不满足，则当前行不匹配，跳出循环
isMatch = false;
break;
}
}
// 根据匹配结果显示或隐藏行
row.style.display = isMatch ? '' : 'none';
});
}
/**
* 清除所有筛选输入框并重新筛选表格
*/
function clearAllFilters() {
filterInputs.forEach(input => {
input.value = ''; // 清空输入框
});
filterTable(); // 重新执行筛选，显示所有行
}
// 为每个筛选输入框添加 'input' 事件监听器
filterInputs.forEach(input => {
input.addEventListener('input', filterTable);
});
// 为清除按钮添加点击事件监听器
if (clearButton) {
clearButton.addEventListener('click', clearAllFilters);
}
// 页面加载时执行一次初始筛选，以防输入框有默认值
filterTable();
})();
</script>代码解析
- 立即执行函数 (function(){...})()： 这是一个常见的JavaScript模式，用于创建私有作用域，避免全局变量污染。
-
获取DOM元素：
- table = document.getElementById('employeeTable')：获取表格元素。
- tbody = table.querySelector('tbody')：获取表格的元素，因为我们主要操作行。
- rows = tbody.rows：获取中的所有行，这是一个HTMLCollection。
- filterInputs = document.querySelectorAll('input[data-column-index]')：通过属性选择器获取所有带有data-column-index属性的输入框。
- clearButton = document.getElementById('clearFilters')：获取清除筛选按钮。
- filterTable() 函数： 这是核心筛选逻辑的实现。
- activeFilters = []：初始化一个空数组，用于存储当前所有非空的筛选条件。每个条件是一个对象，包含columnIndex（列索引）和value（筛选值）。
-
收集筛选条件： 遍历filterInputs，对于每个输入框：
- parseInt(input.dataset.columnIndex, 10)：从data-column-index属性中解析出列索引。
- input.value.trim().toLowerCase()：获取输入值，去除两端空白，并转换为小写，以便进行不区分大小写的匹配。
- rows = tbody.rows：获取中的所有行，这是一个HTMLCollection。
