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

【问题标题】：How to build a simple table filter with jQuery?如何使用 jQuery 构建一个简单的表格过滤器？
【发布时间】：2011-08-13 16:34:28
【问题描述】：

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

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

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

示例：

【问题讨论】：

Good Effect 是什么意思？如果你不想要插件，到目前为止你有什么？
@pimvdb - hide()的效果。我不能使用插件，因为我的代码很大。
我明白了，但你的问题有点宽泛。它与“为我编写代码”问题没有太大区别，这不是 Stack Overflow 的用途。您可能想展示一些代码以获得帮助。
示例：andymatthews.net/code/tablefilter

标签： javascript filter jquery jquery-effects

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

【讨论】：

请在jsfiddle.net 中给我example。这是否适用于所有paginations？
@Sheikhasa Mozali 我给了你小提琴。请检查
为什么会消失？
为了防止<th> 消失，使用$("tbody tr") 作为选择器。同时在两个字符串中添加toLowerCase() 会导致不区分大小写的过滤

【解决方案2】：

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

http://jsfiddle.net/hHJxP/

【讨论】：

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

【讨论】：

【解决方案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。

【讨论】：

如果有pagination 这个工作适用于所有数据还是只适用于pagination 的同一页面？（我想为all page in pagination 工作）这可以吗？
这仅适用于当前表格页面。因此，如果您在第 5 页，则只会找到并过滤第 5 页的结果。