在表格中过滤结果答案

【问题标题】：Filtering results in a table在表格中过滤结果
【发布时间】：2018-01-16 12:44:04
【问题描述】：

我有一个 PHP 页面和一个表格，我用数据库中的数据填充它。我在表格顶部有一个搜索字段，我想在输入时过滤行。

这是我的 Javascript

$('#system-search').keyup( function() 
{
    var that = this;
    // affect all table rows on in systems table
    var tableBody = $('.table table-filter tbody');
    var tableRowsClass = $('.table table-filter tbody tr');
    $('.search-sf').remove();
    tableRowsClass.each( function(i, val) 
    {
        //Lower text for case insensitive
        var rowText = $(val).text().toLowerCase();
        var inputText = $(that).val().toLowerCase();
        if(inputText != '')
        {
            $('.search-query-sf').remove();
            tableBody.prepend('<tr class="search-query-sf"><td colspan="6"><strong>Searching for: "'
            + $(that).val()
            + '"</strong></td></tr>');
        }
        else
        {
            $('.search-query-sf').remove();
        }
        if( rowText.indexOf( inputText ) == -1 )
        {
            //hide rows
            tableRowsClass.eq(i).hide();
        }
        else
        {
            $('.search-sf').remove();
            tableRowsClass.eq(i).show();
        }
    });
    //all tr elements are hidden
    if(tableRowsClass.children(':visible').length == 0)
    {
        tableBody.append('<tr class="search-sf"><td class="text-muted" colspan="6">No entries found.</td></tr>');
    }
});

抱歉代码和格式错误我似乎无法理解如何正确格式化它..

【问题讨论】：

如果这段代码你能描述一下当前的行为吗？究竟是什么问题/疑问？
我正在尝试实现与此处完全相同的目标：bootsnipp.com/snippets/featured/…。当我开始在搜索框中输入时，它会过滤掉结果
客户端（javascript）过滤潜在的大表是错误的模式
那么如何以更有效的方式过滤掉结果呢？而且它真的不是一张大桌子。最多 20-30 行

标签： javascript jquery

【解决方案1】：

https://stackoverflow.com/a/19696936/1406155

您为此使用了太多代码。首先放置一个像这样的输入字段

<input type="text" id="search" placeholder="Search">

并使用以下功能进行搜索

$("#search").keyup(function () {
    var value = this.value.toLowerCase().trim();

    $("table tr").each(function (index) {
        if (!index) return;
        $(this).find("td").each(function () {
            var id = $(this).text().toLowerCase().trim();
            var not_found = (id.indexOf(value) == -1);
            $(this).closest('tr').toggle(!not_found);
            return not_found;
        });
    });
});

【讨论】：