4

現在、この JavaScript 関数を使用して、2 つの異なるテーブルの高さを一致させてすべての行を整列させています。各テーブルには 1000 を超える行があります。また、この関数の実行には 4 秒以上かかります。2 つの異なるテーブルの行の高さを一致させるより速い方法はありますか? ありがとう

function alignTableRowHeights() {
    $('#table1 tr').each(function(i) {
        var rowDisplay=$(this).css("display")
        if(rowDisplay!="none"){
            // Row is visible
            var tableTwoRow = $('#table2 tr').get(i);
            var height = $(tableTwoRow).height();        
            $(this).height(height);
        }
    });
}

テーブル内の行はすべて同じ高さではありません。したがって、各行の高さを個別に取得するロジックが必要です。また、一部の行は (展開と折りたたみのために) 非表示になっている可能性があるため、行が表示されているかどうかを確認する必要があります。目的は、2 つのテーブルを並べて表示することで、表示される行を同期して整列させる必要があります。

4

2 に答える 2

2

Javascript のみが最速ですが、最も遅い部分はおそらく jQuery 自体ではなく、それをどのように使用しているかです。

  1. 行ごとに、1つを使用するためだけに他のすべての行を照会しています。解決策: そのテーブルのループの前にクエリ結果をフェッチする
  2. 行ごとに、計算されたスタイルから表示属性を抽出するよう求めています。解決策: jQuery の:visibleセレクターを使用して、別のチェックを実行する必要がないようにします。
  3. レイアウトやスタイルなどによっては、テーブルが表示されている間の DOM の操作が非常に遅くなることがあります。解決策: 更新しているテーブルを DOM から削除し、高さを更新してから元に戻します。

これを行う方法は次のとおりです。

function alignTableRowHeights() {

    // copy the heights into an array
    var heights = [];
    $('#table2').find('tr:visible').each(function(i) {
        heights[i] = $(this).height();
    });

    // get visible table one rows before we remove it from the dom
    var tableOneRows = $('#table1').find('tr:visible');

    // remove table one from the dom
    var tempDiv = $('<div />');
    var table1 = $('#table1');
    table1.replaceWith(tempDiv);

    $.each(tableOneRows, function(i) {
        $(this).height(heights[i]);
    });

    // put table one back in the dom
    tempDiv.replaceWith(table1);

}
于 2013-09-09T04:47:00.643 に答える
0

高さが固定されるまでテーブルを非表示にします。

function alignTableRowHeights () {
    $('#table1').css('display', 'none');
    $('#table1 tr').each(function (i) {
        var rowDisplay = $(this).css("display")
        if (rowDisplay != "none") {
            // Row is visible
            var tableTwoRow = $('#table2 tr').get(i);
            var height = $(tableTwoRow).height();
            $(this).height(height);
        }
    });
    $('#table1').css('display', '');
}

jsFiddle でのライブ デモ。

于 2013-09-09T06:19:48.083 に答える