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

Question

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

list -> 选择数据库的数据。

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

例子：

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();
        }
    });
});

检查这个

Answer 2

我通常不会帮忙解决这个问题，但今天早上我很无聊..

http://jsfiddle.net/hHJxP/

Answer 3

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

<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>

Answer 4

尝试将行的 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可能会更好。性能方面的 innerHTML 会更好，但.text()不接受 html-tags 作为有效的搜索结果。JSFIDDLE #2。