如何使用搜索过滤多个表条目

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 来做类似的事情