Быстрый способ выравнивания высот строк в двух разных таблицах

Question

В настоящее время используется эта функция 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); 
     } 
    }); 
} 

Строки в таблице не имеют одинаковой высоты. Поэтому должна быть логика, чтобы получить высоту каждой строки по отдельности. И некоторые строки могут быть скрыты (для расширения и сглаживания), и поэтому необходимо проверить, отображается ли строка или нет. Цель состоит в том, чтобы отобразить две таблицы бок о бок, чтобы видимые строки должны были оставаться в синхронизации и выровнены.

Answer 1

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

} 

Answer 2

Просто скрыть таблицу, пока высота не фиксированы:

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

A live demo at jsFiddle.