理解现有代码的局限性

在web开发中，我们经常需要对表格数据进行筛选，以帮助用户快速定位所需信息。当表格数据由php从数据库中获取并渲染到html页面后，客户端的筛选功能通常通过javascript实现。然而，如果现有javascript代码仅支持单个搜索输入框或在处理多个输入时采用“or”逻辑，那么在需要“and”逻辑（即所有条件都必须满足）的多条件筛选场景下，就会遇到挑战。

例如，原始代码可能存在以下问题：

1. 单值限制： searchVal1 变量只能存储一个搜索值。当用户输入“marketing, team lead”时，它被视为一个整体字符串进行匹配，而非两个独立的条件。
2. 全局文本匹配： row.textContent.toLowerCase().indexOf(sVal1) > -1 语句尝试在整个行文本内容中查找匹配项。如果用户期望按“部门”和“角色”分别筛选，这种全局匹配方式无法区分不同列的内容，也无法实现多个独立条件的组合匹配。
3. 缺乏AND逻辑： 当尝试使用多个输入框时，如果代码没有明确实现，结果往往是“OR”逻辑，即只要满足任一条件就显示，而不是所有条件都满足才显示。

为了实现用户期望的“部门为 marketing 并且 角色为 team lead”的精确筛选，我们需要重新设计JavaScript逻辑，使其能够识别多个独立的筛选条件，并将它们应用于表格的特定列，最终通过“AND”逻辑进行组合判断。

实现多条件筛选的核心思路

要实现基于多条件输入的表格筛选，并确保是“AND”逻辑，我们需要遵循以下核心思路：

1. 明确输入与列的关联： 为每个筛选输入框指定其对应的表格列。这可以通过HTML的data-*属性（例如data-column-index）来实现，将输入框与表格中的特定列索引关联起来。
2. 监听所有筛选输入： 无论哪个筛选输入框发生变化，都应触发一次完整的表格筛选操作。
3. 收集所有活动的筛选条件： 在每次筛选操作开始时，遍历所有筛选输入框，收集非空的筛选值及其对应的列索引。
4. 逐行进行多条件匹配： 遍历表格的每一行。对于每一行，检查它是否满足所有收集到的筛选条件。如果行中的对应列文本包含所有筛选值，则该行匹配成功。
5. 应用AND逻辑： 只有当一行满足所有非空筛选条件时，才将其显示；否则，将其隐藏。

构建HTML结构

首先，我们需要一个由PHP生成的基础HTML表格，以及用于筛选的输入框。每个输入框都应通过data-column-index属性明确指定其关联的列（基于0的索引）。

PicWish

推荐！专业的AI抠图修图，支持格式转化

下载

立即学习“PHP免费学习笔记（深入）”；

    
    
    
    



    
员工信息筛选

    

        
        
        
        
        
        清除筛选
    

    

        

            

                
ID
                
姓名
                
部门
                
角色
            
        
        

            
            

                
101
                
张三
                
市场部
                
团队负责人
            
            

                
102
                
李四
                
销售部
                
销售经理
            
            

                
103
                
王五
                
市场部
                
产品专员
            
            

                
104
                
赵六
                
人事部
                
团队负责人
            
            

                
105
                
钱七
                
研发部
                
高级工程师
            
            

                
106
                
孙八
                
销售部
                
销售代表
            
        
    

    

在上述HTML中：

• 我们创建了四个输入框，分别用于筛选ID、姓名、部门和角色。
• 每个输入框都有一个data-column-index属性，其值对应表格中列的0-based索引。例如，部门列是第三列，所以data-column-index="2"。
• employeeTable是我们的目标表格，其内容假设由PHP生成。

编写JavaScript筛选逻辑

接下来是实现筛选功能的JavaScript代码。我们将使用纯JavaScript，不依赖任何库。

代码解析

1. 立即执行函数 (function(){...})()： 这是一个常见的JavaScript模式，用于创建私有作用域，避免全局变量污染。
2. 获取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()：获取输入值，去除两端空白，并转换为小写，以便进行不区分大小写的匹配。