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！
有什么建议可以优化这个片段吗？

score 3 · Accepted Answer

用您的代码检查以下代码性能：

代码：（不包括jquery.js）

<!DOCTYPE>
<html>
<head>
    <script src="jquery.js"></script>
    <script type="text/javascript">
    function searchTable(inputVal) {  
        $('.table').html($('.table').html().replace(RegExp(inputVal, 'g'), '<span class="showthis">' + inputVal + '<span>'));
        $("tr").css('display', 'none');
        $(".showthis").parent().parent().css('display', '');
    }
    </script>
</head>
<body>
    <input id="Button1" type="button" value="button" onclick="searchTable('Text');" />
    <table id="tab" class="table" border="1">
        <tr>
            <td>
                Text
            </td>
            <td>
                A
            </td>
        </tr>
        <tr>
            <td>
                C
            </td>
            <td>
                Text
            </td>
            <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td> ER
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                Text
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                Text
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                Text
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                Text
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                Text
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr> 
        <tr>
            <td>
                I
            </td>
            <td>
                Text
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                I
            </td>
            <td>
                H
            </td>
        </tr>
        <tr>
            <td>
                E
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                G
            </td>
            <td>
            </td>
        </tr> 
    </table>
</body>
</html>

score 3 · Accepted Answer

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

// 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/

score 1 · Accepted Answer

首先我想指出，搜索 5000 行不应该那么重。我还将研究其他可能对性能产生影响的同时运行的事情。

我也不向您保证，以下解决方案是最佳解决方案，但从我进行的测试中，我可以看到速度提高了大约 50%。我仍在研究这里优化此代码，我将继续更新此代码。我还计划在一两天内从 jspref 进行自信的测试。

我的方法

Javascript 的原生for速度比 jQuery 的快$(object).each();
使用 #id 进行 DOM 遍历要快得多。

jQuery 在底层.html()使用 javascript innerHTML。如果你可以直接使用它，它将会有一些性能提升。

$(function() {

var searchTest = new function () {

    this.tableScope = $("#MyTable");

    this.searchTable = function () {
        var start = new Date().getTime();
        this.tableScope.find("tr").hide();
        var matches = 0;
        var searchPattern = new RegExp("abc");// /A/gi;
        var all_TD = document.getElementById("MyTable").getElementsByTagName("td");

        for (var i = 0; i < all_TD.length; i++) {
            if (searchPattern.test(all_TD[i].innerHTML)) {
                 all_TD[i].parentNode.style.display = '';
                 i += i % 5;
                 matches++;
            }
        }
        var end = new Date().getTime();

        $("#MyMethodClock").text(end - start + " ms to search; Matches found " + matches + " out of 5000 records");
     };



}

searchTest.searchTable();
});

这是一个工作的jsFiddle

jquery - 在 html 表中搜索

3 回答 3

Related

Reference