Question

我有一个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>');
    }
});

对于糟糕的代码和格式，我无法理解如何正确格式化它。

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

过滤结果表

1 个答案: