客户端用jQuery搜索表

Question

假设我有一个标准的HTML表结构,如:

<table class="table table-striped table-hover table-bordered table-condensed">
<thead>
    <tr>
        <th>Name</th>
        <th>Type</th>
        <th>Added</th>
    </tr>
</thead>
<tbody>
    <tr id="1a0daa2734" class="item">
        <td><a href="/view/1a0daa2734">Item Number 1</a></td>
        <td>A</td>
        <td>8/1/2012 10:18:34 PM</td>
    </tr>
    <tr id="b1ff6e0ac" class="item">
        <td><a href="/view/b1ff6e0ac">Item Number 2</a></td>
        <td>B</td>
        <td>8/2/2012 5:48:54 PM</td>
    </tr>
    <tr id="edd8b70893" class="item">
        <td><a href="/view/edd8b70893">Item Number 3</a></td>
        <td>A</td>
        <td>8/13/2012 3:55:41 PM</td>
    </tr>
</tbody>
</table>

我正在尝试使用jQuery编写客户端搜索.基本上我有一个id为的搜索框search-items.

    $("#search-items").bind("keyup paste", function() {
        var searchText = $("#search-items").val(); 

        $(".item").each(function() {
             //???
        });
    });

获取搜索值search-items并在tbody中找到非匹配的最佳方法是什么？我想要不匹配,因为那些是我将隐藏的元素.

它应该只搜索前两个td元素,所以name和type列,不添加.

谢谢.

Answer 1

当您将值键入column1或2时,以下代码将尝试匹配值.

$("#search").on("keyup paste", function() {
    var value = $(this).val().toUpperCase();
    var $rows = $("table tr");

    if(value === ''){
        $rows.show();
        return false;
    }

    $rows.each(function(index) {
        if (index !== 0) {

            $row = $(this);

            var column1 = $row.find("td:first a").html().toUpperCase();
            var column2 = $row.find("td").eq(1).text().toUpperCase();

            if ((column1.indexOf(value) > -1) || (column2.indexOf(value) > -1)) {
                $row.show();
            }
            else {
                $row.hide();
            }
        }
    });
});?

演示 - 分别按第1列和第2列搜索您的表(未添加)

我确信有一种更有效的写作方式,但这应该让你开始.