根据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>