HTML表格数据动态过滤教程

DDD

发布时间：2025-10-11 11:23:06

|

198人浏览过

|

来源于php中文网

原创

3. JavaScript/jQuery过滤逻辑

接下来，我们将编写JavaScript代码来实现动态过滤。这里使用jQuery库来简化DOM操作。

$(document).ready(function() {
    // 监听搜索框的键盘抬起事件
    $("#myInput").on("keyup", function () {
        // 获取搜索框的当前值，并转换为小写，以便进行不区分大小写的搜索
        var value = $(this).val().toLowerCase();

        // 选中ID为myTable的表格中的所有行（tr），并使用slice(1)排除表头行
        $("#myTable tr").slice(1).filter(function () {
            // 对于每一行，检查其文本内容（转换为小写）是否包含搜索值
            // 如果包含，toggle(true)显示该行；如果不包含，toggle(false)隐藏该行
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
        });
    });
});

代码解析：

• $(document).ready(function() { ... });：确保在DOM完全加载后执行脚本。
• $("#myInput").on("keyup", function () { ... });：当用户在ID为myInput的输入框中释放键盘按键时触发此函数。
• var value = $(this).val().toLowerCase();：获取输入框中的文本，并将其转换为小写，以实现不区分大小写的搜索。
• $("#myTable tr")：选择ID为myTable的表格中的所有元素。
• .slice(1)：这是一个关键步骤。它用于从选定的行集合中移除第一个元素。在表格中，第一个通常是表头行（），我们不希望它被过滤。slice(1)确保我们只对数据行进行过滤。
• .filter(function () { ... });：遍历剩余的每一行（）。
• $(this).text().toLowerCase().indexOf(value) > -1：获取当前行的所有文本内容，转换为小写，然后检查它是否包含搜索值。indexOf()方法返回子字符串的起始索引，如果没有找到则返回-1。因此，> -1表示找到了匹配项。
• $(this).toggle(...)：根据条件显示或隐藏当前行。如果条件为true（找到匹配项），则显示该行；如果为false（未找到匹配项），则隐藏该行。

4. 完整的示例

将上述HTML和JavaScript代码结合，您可以创建一个功能完整的动态过滤表格。

    
    
    
    
    



    
测试结果报告

    

        搜索测试用例：
        
        


        

            

                

                    
S.No
                    
Testcase
                    
Result:
                    
SECTION
                    
Reason
                    
Analysis
                
            
            

                
0
CallsiteMemLeakReportInitial
FAILED
section test_case
Mem leak found before the run
Script issue
                
1
FinalMemLeakReport
FAILED
section check_final_mem_leaks
Memory Leaks Found
Script issue
                
2
CallsiteMemLeakReportFinal
FAILED
section test_case
Mem leak found before the run
Script issue
                
3
InitialMemLeakReport
PASSED

                
4
TriggerInterfaceFlaps
PASSED

                
5
TriggerVlanInterfaceFlaps
PASSED

                
6
TriggerClearIPOspfProcess
PASSED

                
7
TriggerClearIPDTProcess
PASSED

                
8
TriggerClearIPRouteProcess
PASSED

                
9
TriggerClearAuthSessions
PASSED

                
10
TriggerClearFlowMonitorCace
PASSED

                
11
TriggerBgpNeighborFlap
PASSED

                
12
TriggerVlanInterfaceFlaps
PASSED

            
        
    

    

5. 注意事项与扩展

• 性能优化： 对于包含成千上万行的超大型表格，客户端过滤可能会导致性能问题。在这种情况下，考虑使用虚拟滚动、分页或服务器端过滤。
• 过滤特定列： 如果您只想过滤表格的某一列（例如，只搜索“Testcase”列），您可以修改filter函数内部的选择器。例如，$(this).find('td:eq(1)').text().toLowerCase().indexOf(value) > -1 将只搜索第二列（索引为1）。
• 多条件过滤： 可以扩展此逻辑以支持多个搜索框或下拉菜单，实现更复杂的过滤条件（例如，同时按“Testcase”和“Result”过滤）。
• CSS样式： 示例中包含了一些基础CSS，您可以根据自己的设计需求进行美化。

总结

通过本教程，您应该已经掌握了如何使用jQuery实现HTML表格的客户端动态过滤功能。关键在于正确的HTML结构（将ID赋给

元素）以及利用slice(1)方法排除表头行。这种技术可以显著提升用户在处理大量表格数据时的体验。