1

文字列のリストを含む数百行の長さのhtmlテーブルがあります。テーブルに新しい行を挿入する入力ボックスもあります。各行の 2 番目の td 要素は常に div 内の文字列であるため、テーブル内の行は次のようになります。

<tr>
    <td><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
    </td>
    <td class="a_string" style="width:200px;">
        <div style="word-wrap:break-word;">hello world</div>
    </td>
    ...
</tr>

ユーザーからの文字列のリストに基づいて、このテーブルに新しい行を挿入したいのですが、文字列が既にテーブルにある場合、その文字列は無視され、挿入されません。ユーザーからの文字列のリストが非常に長く、テーブル内の行数が非常に長い場合に問題が発生します。重複をチェックするために急いで作成した方法は、このタスクには非効率的です。

function check_rows(item) { //called on each item in input list
    var tf = false;
    $('#mytable tbody').children().each(function (i) {
        //loop through each tr

        if ($('#mytable tbody').children().eq(i).children().eq(1).hasClass('a_string')) {
            //if the row is a string to compare (second td element has the class 'a_string')

            if (item == $('#mytable tbody').children().eq(i).children().eq(1).children().eq(0).html()) {
                //find the string within the div within second td in row "i" (current indexed row)
                //compare the strings and if it is found in the table break out of the loop

                tf = true;
                return false;
            }
        }
    });
    //if the item is not found in any of the rows false will be returned 
    return tf;
}

この関数は本来の機能 (重複する文字列のチェック) を実行しますが、遅すぎます。この関数なしでリストを挿入しようとしましたが、ほとんど瞬時だったので、問題はここにあります。

この機能を改善する方法についての提案は大歓迎です!

4

3 に答える 3

1

以下のコードを試すことができます。$('#mytable tbody')内部で使用する必要はありませんeach。代わりに を使用しますthis。

要素を変数に割り当ててみると、より高速な参照が作成されます。

function check_rows(item) { //called on each item in input list
    var tf = false;
    $('#mytable tbody').children().each(function (i) {
        //loop through each tr

        var tr = $(this).eq(i).children();    
        if (tr.eq(1).hasClass('a_string')) {
            //if the row is a string to compare (second td element has the class 'a_string')

            if (item == tr.eq(1).eq(0).html()) {
                //find the string within the div within second td in row "i" (current indexed row)
                //compare the strings and if it is found in the table break out of the loop

                tf = true;
                return false;
            }
        }
    });
    //if the item is not found in any of the rows false will be returned 
    return tf;
}
于 2013-02-16T01:57:44.917 に答える
0

同じ素材の DOM 検索を何度も行うことがわかっている場合は、関連するデータのコピーを JavaScript データ構造に作成することをお勧めします。これは、DOM を毎回トラバースするよりもはるかに高速に検索できます。時間。

文字列の完全一致をチェックしている場合は、JavaScript オブジェクトのインデックス機能を使用して、正確な文字列がデータ構造に既に存在するかどうかについて、非常に迅速な「はい/いいえ」の回答を提供することもできます。これは、DOM を介した線形検索よりも桁違いに高速です。

于 2013-02-16T01:55:11.673 に答える
0

このようなセレクターを使用します

function check_rows(item) { //called on each item in input list
    var tf = false,
        mytbody = $('#mytable tbody'),
        secondCell;
    $('tr', mytbody).each(function (i) {
        //loop through each tr
        secondCell = $('td', this).eq(1);
        if (secondCell.hasClass('a_string')) {
            //if the row is a string to compare (second td element has the class 'a_string')

            if (item == $('div:first', secondCell).html()) {
                //find the string within the div within second td in row "i" (current indexed row)
                //compare the strings and if it is found in the table break out of the loop

                tf = true;
                return false;
            }
        }
    });
    //if the item is not found in any of the rows false will be returned 
    return tf;
}
于 2013-02-16T01:56:26.663 に答える