如何使用jQuery构建一个简单的表过滤器？

Question

如何使用jQuery构建一个效果很好的简单表过滤器？ 我不介意分页。

  

列表 - ＆gt;选择数据库数据。

我不想使用插件，我更喜欢使用短代码。

实施例：

Answer 1

$('#inputFilter').keyup(function() {
    var that = this;
    $.each($('tr'),
    function(i, val) {
        if ($(val).text().indexOf($(that).val()) == -1) {
            $('tr').eq(i).hide();
        } else {
            $('tr').eq(i).show();
        }
    });
});

CHECH THIS

Answer 2

我通常不会帮忙，但今天早上我感到无聊..

http://jsfiddle.net/hHJxP/

Answer 3

尝试将行的innerHTML测试为输入字段的值，根据测试结果显示/隐藏内容。

$('#test').bind('keyup', function() {
    var s = new RegExp(this.value);
    $('tr').each(function() {
        if(s.test(this.innerHTML)) $(this).show();
        else $(this).hide();
    });
});

带有示例表和输入字段的

JSFIDDLE。

修改

使用.text()代替innerHTML可能更好。 Performancewise innerHTML会更好，但.text()不接受html标签作为有效的搜索结果。 JSFIDDLE＃2。

Answer 4

我知道这有点晚了，但希望这段代码有所帮助。

<script>
$(document).ready(function(){
  $("#yourInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#yourTableId tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>