如何将搜索和过滤器添加到 html 表的列？答案

【问题标题】：How to add search and filter to a column of a html table?如何将搜索和过滤器添加到 html 表的列？
【发布时间】：2018-12-14 04:05:26
【问题描述】：

我想在表的 State 列中添加搜索和过滤功能，最好使用 jquery。

这是表格的代码。

<div id="container">
    <div class="table-responsive"> 
<p>
Search: <input type="text" id="table-filter" value="">
</p>
        <table id ="table" class="table table-striped">

            <thead>
                <tr>
                    <th> First Name </th>
                    <th> Last Name </th>
                    <th> State </th>
                    <th> Date of Birth</th>
                    <th> Action </th>

                </tr>
            </thead> 
            <?php
            if (count($report) === 0) {
                echo "<tr>No Reports</tr>";
            } else {
                for ($i = 0; $i < count($report); $i++) {
                    echo
                    "<tr>
                        <td>{$report[$i]['First_Name']}</td>
                        <td>{$report[$i]['Last_Name']}</td>
                        <td>{$report[$i]['State']}</td>
                        <td>{$report[$i]['Date_of_Birth']}</td>
                        <td><a class=btn href='read.php?id=".$read['Id']."'>Read</a></td>

                    </tr>";

                }
            }
            ?>
</table>
</div>
</div>

main.js

$(document).ready(function(){
  $("#table-filter").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#table").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });

});

我对 jquery 很陌生。任何帮助将不胜感激。

【问题讨论】：

如果您是新人，请做一些 tuto 而不是要求 anwser :) 尝试一些东西，如果您做不到，请告诉我们！

标签： php jquery html search

【解决方案1】：

试试这个教程和例子：jQuery Filters

如果你不明白，告诉我来帮助你！

【讨论】：

嘿！是的，从您共享的链接中，我添加了几行代码（编辑了问题）。它不工作。另外，我不确定如何将该功能添加到那个特定的列（状态）。

【解决方案2】：

如果你想在特定列中搜索，试试这个：https://www.w3schools.com/howto/howto_js_filter_table.asp

对于“状态”列，您必须将这一行：td = tr[i].getElementsByTagName("td")[0]; 更改为 td = tr[i].getElementsByTagName("td")[2];

【讨论】：