过滤表行不起作用

时间:2015-10-28 10:22:38

标签: javascript jquery html

我有一个html表,我试图通过保持与写入的文本匹配的行来进行过滤。但无论我在文本框中写什么,第一行总是被删除..

JS:

$("#searchInput").keyup(function () {
//split the current value of searchInput
var data = this.value.split(" ");
//create a jquery object of the rows
var jo = $("#fbody").find("tr");
if (this.value == "") {
    jo.show();
    return;
}
//hide all the rows
jo.hide();

//Recusively filter the jquery object to get results.
jo.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 the rows that match.
.show();
}).focus(function () {
this.value = "";
$(this).css({
    "color": "black"
});
$(this).unbind('focus');
}).css({
"color": "#C0C0C0"
});

表:

<input id="searchInput" value="Type To Filter">
<br/>
<table class="mGrid" id="table">
<tr>
    <th>
        COLUMN1
    </th>
    <th>
        COLUMN2
    </th>
    <th>
        COLUMN3
    </th>
</tr>
<tbody ID="fbody">
        <tr>
            <td>
                NAME1
            </td>
            <td>
                3
            </td>
            <td>
                HOUSE
            </td>
        </tr>
        <tr>
            <td>
                NAME2
            </td>
            <td>
                5
            </td>
            <td>
                LAKE
            </td>
        </tr>
        <tr>
            <td>
                NAME3
            </td>
            <td>
                7
            </td>
            <td>
                DOG
            </td>
        </tr>
        <tr>
            <td>
                NAME555
            </td>
            <td>
                1337
            </td>
            <td>
                CAT
            </td>
        </tr>
</tbody>
</table>

http://jsfiddle.net/ukW2C/1350/

1 个答案:

答案 0 :(得分:0)

问题在于HTML。我有多个ID。查询现已更新并正常工作

相关问题