Как искать таблицу с несколькими входами столбца с помощью jQuery?

Question

Функция поиска таблиц для нескольких столбцов с использованием jQuery?

<table> 
    <tr> 
     <th><input type="text" id="search" placeholder=" live search"></input></th> 
     <th><input type="text" id="search" placeholder=" live search"></input></th> 
    </tr> 
    <tr><th>Unique ID</th><th>Random ID</th></tr> 
    <tr><td>214215</td><td>442</td></tr> 
    <tr><td>1252512</td><td>556</td></tr> 
    <tr><td>2114</td><td>4666</td></tr> 
    <tr><td>3245466</td><td>334</td></tr> 
    <tr><td>24111</td><td>54364</td></tr> 
</table> 
<br /> 
<script> 
    $("#search").on("keyup", function() { 
     var value = $(this).val(); 

     $("table tr").each(function(index) { 
      if (index !== 0) { 

       $row = $(this); 

       var id = $row.find("td:first").text(); 

       if (id.indexOf(value) !== 0) { 
        $row.hide(); 
       } 
       else { 
        $row.show(); 
       } 
      } 
     }); 
    }); 
</script> 

Я пытаюсь реализовать функцию поиска без использования JQuery плагинов ..

jsfiddle Ссылка здесь

http://jsfiddle.net/y9Lxdvps/1/

Answer 1

Использование https://api.jquery.com/index/

var inputs = $('table tr:first th input[type=text]'); 
var trs = $('table tr + tr + tr'); 

inputs.keyup(function() 
{ 
    trs.each(function() 
    { 
     var tr = $(this); 

     var show = inputs.toArray().every(function(input, index) 
     { 
      var value = $(input).val(); 

      if (value === '') 
      { 
       return true; 
      } 

      var number = index + 1; 
      var td = tr.children('td:nth-child(' + number + ')'); 
      var text = td.text(); 

      return text.indexOf(value) != -1; 
     }); 

     tr[show ? 'show' : 'hide'](); 
    }); 
});