javascript - 根据 HTML 输入使用 Jquery 过滤表数据

Question

你能帮我正确编写 Jquery 代码吗，这样我就可以根据文本输入过滤 HTML 表格。到目前为止，这是我的代码:

    <input type="text" name="inputdata" id="inputdata" onkeyup="filter()">
    <table>
            <tr>
                <th>ID</th>
                <th>Name</th>
            </tr>
            <tr name="data">
               <?php foreach ($products as $row) { ?>
                 <td><?php echo $row->id_product; ?></td>
                 <td><?php echo $row->name; ?></td>
               <?php }  ?>
            </tr>

Jquery代码

<script>
    function filter(){
        inp = $('#inputdata').val()
        $("tr").filter(function() {
            return $(this).text().indexOf(inp) == -1;
        }).hide();
    }
</script>

所以我的问题是:

1. 搜索区分大小写
2. 当我输入一些字符串时，比如说 Pants，Jquery 会过滤数据，但随后我必须刷新页面，以便我可以再次搜索。或者让我换句话说...当我删除搜索字段中输入的数据时，表格不会刷新。它只是停留在裤子数据上，因此对于另一次搜索，我必须重新加载网页
3. <th>搜索数据时会被删除。如果我声明$('tr[name=data]').filter(function() {搜索停止工作

提前感谢您对我的帮助!

Answer 1

这应该可以解决您的问题:

<script>
function filter(){
    inp = $('#inputdata').val()
    // This should ignore first row with th inside
    $("tr:not(:has(>th))").each(function() {
        if (~$(this).text().toLowerCase().indexOf( inp.toLowerCase() ) ) {
            // Show the row (in case it was previously hidden)
            $(this).show();
        } else {
            $(this).hide();
        }
    });
}
</script>