如何对 HTML 表格执行实时搜索和过滤？

在这里，我们学习如何对 HTML 表执行实时搜索和过滤。当输入一个词时，将搜索表格的所有行（表头除外）并显示包含匹配词的行。为此，我们可以使用 JQuery 方法。

• filter()：此方法用于过滤掉所有与所选条件不匹配的元素，并返回那些匹配的元素。将匹配元素集减少到与选择器匹配或通过函数测试的元素集。
• toggle()：该方法用于检查被选元素的可见性，以便在被选元素的 hide() 和 show() 之间切换。显示或隐藏匹配的元素。

在下面的示例中，在搜索框中输入的搜索值存储在名为“value”的变量中并转换为小写，因为我们正在进行不区分大小写的搜索。之后，我们使用filter()函数搜索表中的每一行，并显示找到存储在变量“value”中的字符串的行。 toggle()方法用于显示包含搜索词的行并隐藏其他行。如果在行中找不到该单词，则indexOf(value)返回 -1。

示例：下面的示例说明了使用 filter() 和 toggle()函数对 HTML 表执行实时搜索和过滤。

  

    
    
  
    
        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 50%;
        }
          
        td,
        th {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }
          
        h1 {
            color: green;
        }
    

  

    
        GeeksforGeeks
        
          perform a real time search and filter 
          on a HTML table
        
        Search the table for Course, Fees or Type: 
          
        
        
        
        
            
                
                
                
            
            
                
                    
                    
                    
                
                
                    
                    
                    
                
                
                    
                    
                    
                
                
                    
                    
                    
                
            
        CourseDurationTypeC++ STL1499Online Classes
                    DSA Foundation7999Regular ClassesGeeks Classes10799Weekend ClassesPlacement 1009999Online Classes
  
        
            $(document).ready(function() {
                $("#gfg").on("keyup", function() {
                    var value = $(this).val().toLowerCase();
                    $("#geeks tr").filter(function() {
                        $(this).toggle($(this).text()
                        .toLowerCase().indexOf(value) > -1)
                    });
                });
            });
        
  
  

  

输出：