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

このスクリプトは、各行の各セルをループするため、実行に時間がかかります。1 行に 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% の速度向上が確認できました。ここでこのコードを最適化することをまだ検討しています。これを更新し続けます。また、1 日か 2 日で jspref からアサーティブテストを行う予定です。

私のアプローチ

Javascript のネイティブforは jQuery よりも高速です$(object).each();
#id を使用すると、DOM Traversing がはるかに高速になります。

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