javascript - 使用输入文本框搜索和过滤 html 表数据

Question

我有一个使用 php 动态填充的表。我想为其添加搜索功能。在 stackoverflow 上搜索类似问题后，我发现了一个我尝试过的 JS 片段。

var $rows = $('#existing tr');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});

jsfiddle链接:http://jsfiddle.net/kvkBw/3/

问题是，当我输入任何搜索词时，表格本身会被隐藏(变得不可见)任何帮助将不胜感激，谢谢!。

请注意，php 代码已被删除，因为 jsfiddle 不支持 php，同时也是为了增加可读性

Answer 1

首先，你的函数搜索是错误的，什么是 !~ ，以及为什么你试图隐藏你发现的所有事件？

试试这个:

var $rows = $('#existing tbody tr:not(:first)'); // this is the reason for table                        hidding like @drizzie says

$('#search').keyup(function () {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $rows.hide().filter(function () {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();

        return text.indexOf(val) != -1 ;
    }).show();
});

但最好看看 DEMO