2016-06-21 14 views
0

複数の列を使用して複数の名前でデータを並べ替えようとしています。jQueryを使用して1つのテキストボックスに複数の列の複数の名前をフィルタリングする

Search Box: A,B,Good 

出力:

Item Qty Type 
A 525 Good 
A 145 Good 
B 150 Good 

HTML:

<table id="table"> 
    <tr> 
    <th>Item</th> 
    <th>Qty </th> 
    <th>Type</th> 
    </tr> 
    <tr> 
    <td>A</td> 
    <td>525</td> 
    <td>Good</td> 
    </tr> 
    <tr> 
    <td>A</td> 
    <td>145</td> 
    <td>Good</td> 
    </tr> 
    <tr> 
    <td>B</td> 
    <td>250</td> 
    <td>Bad</td> 
    </tr> 
    <tr> 
    <td>C</td> 
    <td>152</td> 
    <td>Bad</td> 
    </tr> 
    <tr> 
    <td>D</td> 
    <td>250</td> 
    <td>Poor</td> 
    </tr> 
    <tr> 
    <td>B</td> 
    <td>150</td> 
    <td>Good</td> 
    </tr> 
</table> 

のjQuery:例えばのために

var $rows = $('#table tr'); 
    $('#search').keyup(function(){ 
      var term = $(this).val(); 
      if(term.trim().length == 0){ 
      // Show everything if no text is present 
      $('#table tr').show(); 
      } 
      else{ 
      // Build your selectors (map each term to a contains statement) 
      var selectors = term.split(',').map(function(t){ 
       return '#table tr:contains("' + t + '")'; 
      }); 
      // Hide all of your rows and then target the selectors to display them 
      $("#table tr").hide().filter(selectors.join(',')).show(); 
      } 

    }); 

が、私はコードを書く、しかし、あなたは、その後、入力すると、 Aを隠して表示する私が理解するのを助けてください。
ありがとうございます。それは、この入力AのみGOOD.Tryを示しいけないThank.But

答えて

0

ここでは、この

$('#search').keyup(function(){ 
     var term = $(this).val(); 
     if(term.trim().length == 0){ 
     $('#table tr').show(); 
     } 
     else{ 
     var arr = term.split(','); 
     var row = $('#table tr').filter(function() { 
        return $(this).find('td').filter(function(){ 
         return jQuery.inArray($(this).text(), arr) > -1; 
       }).length > 0; 
     }); 
     $("#table tr").hide(); 
     $(row).show(); 
     } 

}); 

を試してみてはフィドル例https://jsfiddle.net/ekwdgu8w/5/

+0

あり、B、GOOD.ItもBADを示しています。 – Babaji

関連する問題