jquery - 在 html 表中搜索

Question

我有一个几乎有 5000 行的大表。我正在使用以下 jquery 片段来搜索该表中的特定文本。

function searchTable(inputVal) {

    var table = $('.table');

    table.find('tr').each(function(index, row) {
        var allCells = $(row).find('td');

        if(allCells.length > 0) {
            var found = false;
            allCells.each(function(index, td) {
                var regExp = new RegExp(inputVal, 'i');
                if(regExp.test($(td).text())) {
                    found = true;
                    return false;
                }
            });

            if(found == true) {
                $(row).show();
            } else {
                $(row).hide();
            }
        }   
    });
}

现在这个脚本需要一些时间来执行，因为它循环遍历每行的每个单元格。考虑到表格中一行有 6 个单元格，迭代总数几乎是 6*5000=30000!
有任何优化此代码片段的建议吗？

Answer 1

您还可以创建自定义扩展，例如:

// jQuery expression for case-insensitive filter
$.extend($.expr[":"], 
{
    "contains-ci": function(elem, i, match, array) 
    {
        return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
    }
});

像这样使用它:

$("#table tbody>tr").hide(); // hides all tr
$("#table td:contains-ci('" + value + "')").parent("tr").show(); // show tr that containt value

这是一个运行示例:http://jsfiddle.net/QvU67/