Question

我正在尝试过滤表格的行，以在搜索栏中显示输入文字的结果。下面的代码完成了这项工作，但由于某种原因，也会过滤列标题。

$('#search').keyup(function () {
    var data = this.value.split(" ");
    var rows = $(".Info").find("tr").hide();
    if(this.value ==""){
        rows.show();
        return;
    }
    rows.hide();
    rows.filter(function(i,v){
        var t = $(this);
        for (var d = 0; d < data.length; d++) {
            if (t.is(":Contains('" + data[d] + "')")) {
                return true;
            }
        }
        return false;
    }).show();
});

HTML

<input type = "search" name = "search" id = "search">
<table style ="width:95%" class = "Info">
    <tr>
        <th>Select </th>
        <th>Name</th>
        <th>Number</th>
        <th>Date</th>
    </tr>
</table>

用户添加行，这就是我没有为其编写任何HTML的原因。

任何帮助将不胜感激。提前致谢

Answer 1

http://jsfiddle.net/szjhngwm/

您似乎需要使用tbody

进行过滤

<table style ="width:95%" class = "Info">
<thead>    
<tr>
        <th>Select </th>
        <th>Name</th>
        <th>Number</th>
        <th>Date</th>
    </tr>
<thead>
<tbody>

</tbody>
</table>

var rows = $(".Info tbody tr").hide();

Answer 2

另一种方法是使用jQuery的：gt（）选择器。

唯一可以改变的是这一行：

var rows = $(".Info").find("tr:gt(0)").hide();

请注意:gt(0)添加了tr。

搜索时过滤表格行

2 个答案: