如何使用文本框中的文本使用jquery过滤html表中的行？

Question

我有一个像这样的html表:

<table>
       <tr><th>Column Heading</th></tr>
       <tr><td>ABC</td></tr>
       <tr><td>DEF</td></tr>
       <tr><td>ABC</td></tr>
       <tr><td>223</td></tr>
       <tr><td>ABCDEF</td></tr>
</table>

我有一个html文本框,当我在文本框中键入文本时,我想要功能,它使用它来根据第一列中的内容过滤html表行

因此,如果我在文本框中键入"AB",则仍会显示3行,而其他行将被隐藏.如果我删除"AB",则所有行再次显示.

基于输入到文本框中的内容进行过滤,隐藏html表中行的最有效方法是什么？

Answer 1

在html中尝试这个: -

<input type="text" class="search"/>

<table>
<thead>
   <tr><th>Column Heading</th></tr>
    </thead>
<tbody>
   <tr><td>ABC</td></tr>
   <tr><td>DEF</td></tr>
   <tr><td>ABC</td></tr>
   <tr><td>223</td></tr>
   <tr><td>ABCDEF</td></tr>
 </tbody>
</table>

和Jquery: -

$('.search').keyup(function(){
    var val=$(this).val().toLowerCase();    
    $('table tbody tr').hide();
     var trs=$('table tbody tr').filter(function(d){
       return $(this).text().toLowerCase().indexOf(val)!=-1;
     });
     trs.show();   
 });

演示