4

当前使用此 javascript 函数通过匹配 2 个不同表中的高度来对齐所有行。每个表有 1000 多行。而这个函数的执行时间超过 4 秒。有没有更快的方法来匹配两个不同表的行高？谢谢

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);
        }
    });
}

表中的行的高度并不完全相同。因此需要有逻辑来单独获取每行的高度。并且某些行可能被隐藏（用于展开和折叠），因此需要检查行是否显示。目的是并排显示两个表，因此可见行需要保持同步和对齐。

4

2 回答 2

2

只有 Javascript 是最快的，然而，最慢的部分可能不是 jQuery 本身，而是你如何使用它：

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