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 回答