0

私はかなり大きなテーブル (表示する必要がある 4000 行以上) を持っており、行の 4 番目のセルごとにクラスを追加する必要があります。私のコードでは、約 800 ミリ秒で実行できます。しかし、それを 2 回 (別の列と別のクラスに対して) 行う必要があるため、ユーザーは多くの時間を待たなければなりません。

みんな、時間のかかる高価なものを見逃したら、私のコードを投げて見てもらえますか? 私の心の中で最高だったのは、次のコードです。

// $(td) - is a cell in header that was clicked
// index = column number to add class
var countColumns = $(td).closest("table").find("tr:last").children("td").length;
var $childrenTD = $(td).closest("table").find("tr").not("headrow").children("td");
for(var i=index; i<$childrenTD.length; i+=countColumns) {
    $($childrenTD[i]).addClass(cssClass);
}
4

2 に答える 2

3

あなたが簡単にできるように私には見えます：

$(td).closest("table")
    .find("tr:not(.headrow) td:nth-child(" + index + ")")
    .addClass(cssClass);

ここでは、親 (行) の 4 番目の子であるtd:nth-child(4)every を選択しています。td

于 2012-11-21T04:19:49.897 に答える
0

まず最初に... Ben Alpert の答えは問題なく、おそらく受け入れられます。

それでもパフォーマンスや速度に問題がある場合は、「昔ながらの方法」で行うことをお勧めします...バニラ JavaScript と DOM トラバーサルを使用します。

ここにフィドルがあります。ここでは、コストのかかるクエリをスキップするために、ハイブリッド JQuery/vanilla-js コードを使用しました。

$('td').click(function() {
    //get all the trs in the table.
    var trs = this.parentElement.parentElement.parentElement.getElementsByTagName('tr');

    for (var i = 0; i < trs.length; i++) {
        var tr = trs[i];
        if ($(tr).hasClass('headrow')) continue;
        var fourth = tr.getElementsByTagName('td')[3];        
        $(fourth).addClass('someclass');
    }
});​

DOM からクラスを追加してテストするためのカスタム関数を作成しないと、それよりもはるかに高速になることはありません。これは面倒です。

編集:これは 100% バニラ JS ソリューションのフィドルです。

これは 100% バニラ バージョンです (これは IE でテストしていません)。

function bindAllElements(elements, eventName, fn) {
    for (var i = 0; i < elements.length; i++) {
        var element = elements[i];
        element.addEventListener(eventName, fn);
    }
}

function hasClass(element, className) {
    if (typeof element.className === 'undefined') return false;
    return element.className.indexOf(className) >= 0;
}

function addClass(element, className) {
    if (!hasClass(element, className)) {
        element.className += ' ' + className;
    }
}

var alltds = document.getElementsByTagName('td');

bindAllElements(alltds, 'click', function(e) {
    var td = e.target || event.srcElement;
    var table = td.parentElement.parentElement.parentElement;
    var trs = table.getElementsByTagName('tr');
    for (var i = 0; i < trs.length; i++) {
        var tr = trs[i];
        if (!hasClass(tr, 'headrow')) {
            addClass(tr.getElementsByTagName('td')[3], 'someclass');
        }
    }
});​

EDIT2: これは楽しい挑戦でした... これは、 VanillaJS/Jquery/Hybrid のパフォーマンスを示す jsperf です。

VanillaJS バージョンは、他の提案された方法で実行するよりも約 2 倍高速であることを示しています。

于 2012-11-21T04:44:27.340 に答える