2

すべての行に 1 つのセルを含むテーブルがあり、その中にチェックボックスとそのチェックボックスのラベルがあります。

入力されたテキストに基づいて行を非表示にするために私がやろうとしていること。

基本的にこれは名前のリストであり、入力されたテキストを含まないものをフィルタリング/非表示にしたい。

これは私の機能です:

$(function () {
$('#user_name').keyup(function () {
    if ($.trim($('input#user_name').val()) == '') {
        $('table.myList >tbody >tr').each(function (index, value) {
            $(this).css("display", "block");
        });
    } else {
        $('table.myList >tbody >tr').each(function (index, value) {
            if ($(this).find('td > label').length > 0) {
                if ($(this).find('td > label').html().toLowerCase().indexOf($.trim($('input#user_name').val()).toLowerCase()) >= 0) {
                    $(this).css("display", "block");
                } else {
                    $(this).css("display", "none");
                }
            }
        });
    }
});
});

テーブルに 40 件のレコードがある場合、このコードは機能しますが、リストを 500 に増やすと速度が低下し、時間の経過とともにブラウザがクラッシュします。

このコードを改善してより高速に動作させる方法を探しています。

モックアップ コードへのリンクは次のとおりです: http://jsfiddle.net/gGxcS/

==更新==

@scessor と @nnnnnn の回答に基づく私の最終的な解決策は次のとおりです。

$(function () {

var $tableRows = $('table.myList tr');
var lastInput = '';

$('#user_name').keyup(function () {
    var sValue = $.trim($('input#user_name').val());
    if(lastInput==sValue) return;
    if (sValue == '') {
        $tableRows.show();
    } else {
        $tableRows.each(function () {
            var oLabel = $(this).find('label');
            if (oLabel.length > 0) {
                if (oLabel.text().toLowerCase().indexOf(sValue.toLowerCase()) >= 0) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            }
        });
        lastInput=sValue;
    }
});

$('img.removeSelections').click(function () {
    $('table.myList input[type="checkbox"]').prop("checked", false);
})
});
4

2 に答える 2

2

jQueryオブジェクトをキャッシュすることをお勧めします-すべてのキーストロークで処理したい場合、keyupハンドラーの外でテーブル行オブジェクトをキャッシュします。また、ループ外で関数を呼び出すことができる場合は、ループ内で関数を呼び出さないでください。たとえば、すべての反復.each()で呼び出す必要はありません。$.trim($('input#user_name').val()).toLowerCase().each()

$(function () {
    var $tableRows = $('table.myList >tbody >tr');

    $('#user_name').keyup(function () {
        var searchStr = $.trim($('input#user_name').val()).toLowerCase();
        if (searchStr === '') {
            $tableRows.css("display", "block");
        } else {
            $tableRows.each(function (index, value) {
                var $this = $(this),
                    $label =$this.find('td > label');
                if ($label.length > 0) {
                    if ($label.html().toLowerCase().indexOf(searchStr) >= 0) {
                        $this.css("display", "block");
                    } else {
                        $this.css("display", "none");
                    }
                }
            });
        }
    });
});

デモ: http://jsfiddle.net/gGxcS/3/

于 2012-07-03T07:29:46.203 に答える
2

このコードを (多くの要素で) テストできますか?

$(function () {
    $('#user_name').keyup(function () {
        var sValue = $.trim($('input#user_name').val());
        if (sValue == '') {
            $('table.myList tr').show();
        } else {
            $('table.myList tr').each(function() {
                var jThis = $(this);
                var oLabel = jThis.find('label');
                if (oLabel.length > 0) {
                    if (oLabel.text().toLowerCase().indexOf(sValue.toLowerCase()) >= 0) {
                        jThis.show();
                    } else {
                        jThis.hide();
                    }
                }
            });
        }
    });
});
  • 同じパラメーターで関数を 2 回呼び出さないでください (例: $.trim($('input#user_name').val());)。
  • 短いセレクターを使用します。
  • 必要な場合にのみ jquery を使用してください (たとえば、ここでは必要ありません: $('table.myList >tbody >tr').each(function (index, value) {)。

===更新===

誰かがbackspace長く持ちこたえると、すべてがtr何度も見えるようになります。これを防ぐために、最後の値が現在の値と等しいかどうかを確認できます。true の場合、何もしません。

===更新===

すべてのチェックボックスをオフにするには、jQuery のバージョンによって異なります。

jQuery 1.6 以降の場合:
$('table.myList input[type="checkbox"]').prop("checked", false);
以前:
$('table.myList input[type="checkbox"]').attr("checked", false);

于 2012-07-03T07:11:42.427 に答える