0

別のテーブルの対応する行に基づいて、テーブルの各行の高さを設定する必要があるという要件があります。テーブルには約 500 行あります。以下のJavascriptを書いてみたのですが、8000ミリ秒あたりでかなりパフォーマンスが悪いです。どうすればこれを速くすることができますか、ヒントをいただければ幸いです。

 var start = new Date().getTime();


 var rows = document.getElementById("table1").rows;
 var dup_rows = document.getElementById("table2").rows;
 var num_rows = rows.length;
 var num_dup = dup_rows.length;
 for (var i = 0; i < num_rows; ++i) {
var hg = rows[i].offsetHeight;
    rows[i].style.height = hg +'px';
dup_rows[i].style.height = hg +'px';
   }

var end = new Date().getTime();
var time = end - start;
alert('Execution time: ' + time);

DOM外でテーブルを編集するという提案に基づいて、以下を試しましたが、DOMからテーブルを削除すると、outerHeight/offsetHeightが0を返します。

      clone_small = $('#table2').clone();
      clone_main_tab = $('#table1').clone();
 $("#table2").remove();
 $("#table1").remove();

 $(clone_main_tab).find("tr").each(function(i) {
 var hg = 0;
 hg = $(this).offsetHeight;  // If I hard code the height it works
  // alert(hg);
 $(this).height(hg);
 clone_small.find("tr").eq(i).height(hg);


 });

これらの行の高さを DOM の外に設定するにはどうすればよいですか?

4

3 に答える 3

2

変更中の要素を DOM から削除し、変更が完了したら再度挿入します。これにより、ブラウザーが変更のたびにドキュメントをリフローする必要がなくなります。

于 2012-09-30T00:52:45.080 に答える
1

良くないdup_rows[i].style.height = rows[i].style.heightですか？

于 2012-09-30T00:54:40.313 に答える
0

以下のコードを使用して、最終的にパフォーマンスをいくらか改善することができました

 $clone_table1 = $('#table1').clone();
 $clone_table2 = $('#table2').clone();

 $('#table2').remove();
 $trow2 = $('#table1').find('tr');
 $trow = $clone_table1.find('tr');
 $trow3 = $clone_table2.find('tr');

 $trow.each(function(i) {
 var hg = 0;
 hg = $trow2.eq(i).outerHeight();
 $(this).height(hg);
 $trow3.eq(i).height(hg);
 });


$parent2.append($clone_table2);
$('#table1').remove();
$parent1.append($clone_table1);
于 2012-10-02T23:43:53.627 に答える