Question

我收到了这段代码

    $(document).ready(function() {
    var activeSystemClass = $('.list-group-item.active');

    //something is entered in search form
    $('#searchfor').keyup( function() {
       var that = this;
        // affect all table rows on in systems table
        var tableBody = $('.table-list-search').find('tbody');
        var tableRowsClass = $('.table-list-search tbody').find('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>');
        }
    });
});

来自http://bootsnipp.com/snippets/featured/js-table-filter-simple-insensitive。代码的目的是扫描表格并过滤（＆＃34;搜索＆＃34;）输入的关键字。我已经遵循了如何加快代码的指南。但是对于包含＆gt; 400条记录的表格，代码会冻结浏览器。有没有办法重写这段代码，以便它可以更快地运行。我试图删除每个（），但由于我不熟悉JavaScript，我失败了。

Answer 1

性能问题无疑是因为在每个密钥上访问DOM这么多次。如果必须以这种方式访问表数据（例如，而不是JSON），最好的办法是将表行首先索引到一个数组中，以便更有效地搜索。

在此之前，如果可能的话，通常需要缓存您正在访问的事件处理程序外部的DOM元素，否则jQuery必须在每次触发事件时找到这些元素。还可以利用现有的选择器（例如tableBody）来获取子元素。

首先，我们有：

var tableBody = $('.table-list-search').find('tbody');
var tableRowsClass = tableBody.find('tr');

然后我们对表进行索引，将行中的文本一次添加到tableData数组中。 在事件之外和之前你有这个：

// store the table data in an array
var tableData = [];
tableRowsClass.each(function(i, val) {
    tableData.push($(val).text().toLowerCase());
});

最后，我们使用 each（）挖掘keyup事件中的表数据数组，以查找搜索项的多个实例。

// scan the table data array on each keyup
$('#searchfor').keyup(function() {
    var inputText = $(this).val().toLowerCase();
    // use each instead of indexOf to get multiple instances
    $(tableData).each(function(i, val){
        if (val.indexOf(inputText) > -1) {
            // the index of the data in the array will be the same 
            // as the corresponding table row
            tableRowsClass.eq(i).show();
        } else {
            tableRowsClass.eq(i).hide();
        }
    });
});

毫无疑问，这会显着提高表搜索的效率。访问存储在JavaScript中的数据总是比从DOM中检索数据更快，这只是因为处理开销较少。

使用上面的代码查看一个工作示例：http://jsfiddle.net/ah88w55k/

使用jQuery更快地搜索表

1 个答案: