本教程详细介绍了如何使用纯JavaScript实现对PHP动态生成的HTML表格进行多条件（AND逻辑）筛选。针对现有单条件筛选代码的局限性，文章提供了一种通过绑定多个输入框到特定列、并实时应用所有非空筛选条件来精确匹配表格行的解决方案，旨在提升用户体验和数据检索效率。
理解现有代码的局限性
在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免费学习笔记（深入）”；
PHP表格多条件筛选 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; }员工信息筛选
| ID | 姓名 | 部门 | 角色 |
|---|---|---|---|
| 101 | 张三 | 市场部 | 团队负责人 |
| 102 | 李四 | 销售部 | 销售经理 |
| 103 | 王五 | 市场部 | 产品专员 |
| 104 | 赵六 | 人事部 | 团队负责人 |
| 105 | 钱七 | 研发部 | 高级工程师 |
| 106 | 孙八 | 销售部 | 销售代表 |
在上述HTML中：
我们创建了四个输入框，分别用于筛选ID、姓名、部门和角色。每个输入框都有一个data-column-index属性，其值对应表格中列的0-based索引。例如，部门列是第三列，所以data-column-index=”2″。employeeTable是我们的目标表格，其内容假设由PHP生成。
编写JavaScript筛选逻辑
接下来是实现筛选功能的JavaScript代码。我们将使用纯JavaScript，不依赖任何库。
(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(); })();
代码解析
立即执行函数 (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()：获取输入值，去除两端空白，并转换为小写，以便进行不区分大小写的匹配。
以上就是使用纯JavaScript实现基于多条件输入的PHP生成表格筛选的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1293913.html
微信扫一扫 
支付宝扫一扫 
