搜索时过滤表行答案

【问题标题】：Filtering table rows upon Search搜索时过滤表行
【发布时间】：2015-08-14 11:31:39
【问题描述】：

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

$('#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 的原因。

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

【问题讨论】：

标签： javascript jquery html

【解决方案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();

【讨论】：

【解决方案2】：

另一种方法是使用 jQuery 的 :gt() 选择器。

唯一会改变的是这一行：

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

注意:gt(0) 添加到您的tr。

【讨论】：