如何使用 jquery 将文本框中的文本用于过滤 html table 中的行？

Question

我有一个 html table 这样的：

<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 table 行第一列

因此，如果我在文本框中输入 "AB"，其中 3 行仍会显示，而其他行将被隐藏。如果我删除 "AB" 然后所有行再次显示。

根据输入到文本框中的内容进行过滤，隐藏 html table 中行的最有效方法是什么？

Answer 1

我认为这应该能让你朝着正确的方向前进

$('#myTextbox').keyup(function() {
 var text = $(this).val();
 
 $('#myTable tr').each(function() {
  if($(this).find('td').first().html() == text) {
   $(this).show();
  }
  else {
   $(this).hide();
  }
 });
});

Answer 2

在 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();   
 });

Demo

Answer 3

HTML

<input type="textbox" id="text"/>
<table id="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>

jQuery

$('#text').keyup(function() {
    var text = $(this).val();
    $('#table tr').each(function() {
        var val = $(this).text();
            if( val.toLowerCase().indexOf(text)>=0) {
            $(this).show();
        }
        else {
            $(this).hide();
        }
    });
});

Demo

如何使用 jquery 将文本框中的文本用于过滤 html table 中的行？

How can I have text in a textbox be used to filter rows in an html table using jquery?

jquery

html-table

filter