如何使用搜索過濾多個表項

Question

如何過濾表格並僅顯示與用戶鍵入的關鍵字匹配的表格？ 我希望能夠在頁面中有多個表格，但我希望仍然能夠根據用戶輸入顯示和隱藏。

   <!-- <table class="responsive-stacked-table with-mobile-labels tablesection"> 
         <tr> 
          <th>Submitted By</th> 
          <th>Egg or Nestling?</th> 
          <th>How Many?</th> 
          <th>Location</th> 
          <th>Description of Nest</th> 
          <th>Possible Species?</th> 
          <th>Edit // Delete</th> 

         </tr> --> 
         <br><table class="responsive-stacked-table with-mobile-labels tablesection"> 
         <tr> 
          <th>Submitted By</th> 
          <th>Date Submitted</th> 
          <th>Egg or Nestling?</th> 
          <th>How Many?</th> 
          <th>Location</th> 
          <th>Description of Nest</th> 
          <th>Possible Species?</th> 
          <th>Edit // Delete</th> 

         </tr><tr><td data-label='Submitted By:' ><img src='images/profilepics/levi.jpg'class= 'img-circle submittedbypicture' > <br>partymo</td><td data-label='Date Submitted:' ><br> Last Edited: <br> </td><td data-label='Egg or Nestling:' >egg</td><td data-label='How Many:'>3</td><td data-label='Location:'>$nest['profilepicfile']</td><td data-label='Description:'>$nest['profilepicfile']</td><td data-label='Possible Species:'>edit if you know!</td><td><a href="edit.php?id=4">Edit</a> // <a href="delete.php?id=4">Delete</a></td></tr></table><br><br><br><br><table class="responsive-stacked-table with-mobile-labels tablesection"> 
         <tr> 
          <th>Submitted By</th> 
          <th>Date Submitted</th> 
          <th>Egg or Nestling?</th> 
          <th>How Many?</th> 
          <th>Location</th> 
          <th>Description of Nest</th> 
          <th>Possible Species?</th> 
          <th>Edit // Delete</th> 

         </tr><tr><td data-label='Submitted By:' ><img src='images/profilepics/rubert.jpg'class= 'img-circle submittedbypicture' > <br>robster</td><td data-label='Date Submitted:' >2017-08-09<br> Last Edited: <br> 2017-08-11</td><td data-label='Egg or Nestling:' >nestling</td><td data-label='How Many:'>4</td><td data-label='Location:'>4</td><td data-label='Description:'>really big. </td><td data-label='Possible Species:'>edit if you know!</td><td><a href="edit.php?id=9">Edit</a> // <a href="delete.php?id=9">Delete</a></td></tr></table><br><br><br> 

Answer 1

如果我理解正確的，你基本上要能夠使用文本框來過濾表？

如果你想基於JS-客戶端篩選，而你細使用jQuery，你可以設置你的HTML像這樣：

<input type="textbox" class="fitler-input" data-for="filterable-table1"> 
<table id="filterable-table1"> 
    ... 
</table> 

，那麼你可以使用jQuery做類似的東西

 
<script type="text/javascript"> 
function filterfunction(tablerow,testvalue) { 
    // sample filter: include rows where any cell contains the testvalue text 
    return tablerow.text().toLowerCase().indexOf(testvalue.toLowerCase()) > -1; 
} 

jQuery(function($){ 

    $(".filter-input").each(function(){ // start by iterating all filter textboxes 
     var $filter = $(this); // select the filter 
     var $table = $("#"+$filter.data("for")); // select this filter's table 

     $filter.on("change keydown keyup keypress", function(){ // whenever user types in box, 
      setTimeout(function(){ // timeout makes the value retrieval more instant 
       var $rows = $table.find(">tr, >tbody>tr"); // get all table rows 
       var value = $filter.val(); // get this filter's new value 
       $rows.each(function(){ // go through all rows, and test against filter 
        var $row = $(this); // get this row 
        if(filterfunction($row,value)) // test this row 
         $row.show(); // it matches 
        else 
         $row.hide(); // it doesn't match 
       }); 
      },1); 
     }); 
    }); 

}); 
</script> 

這也將是東西，你可以在香草JS做的（即不使用庫），但它會採取更多的時間和代碼。

和here's a JSFiddle來證明它的行動。

編輯： 只是我的意見，但：

按@彼得 - Rakmanyi的評論，如果你的網站/ Web應用程序/界面在很大程度上數據驅動的，並且計劃有很多HTML操縱根據用戶的意見，AngularJS可能是你應該考慮的事情。這需要對HTML進行一些重構（這可能意味着一些PHP的調整），但它可能是值得的。

如果這是您需要過濾的幾個小案例之一，那麼您可能會放棄使用jQuery。