несколько таблиц с одинаковой высотой строки с использованием замыкания

Question

У меня есть две таблицы, бок о бок. Я пытаюсь сделать так, чтобы каждая строка каждой таблицы в одном и том же контейнере имела одинаковую высоту строки на строку. Я получил это далеко с этим.

Как это работает, у вас есть массив, который захватывает высоты строк каждой таблицы и использует наибольшую высоту для каждой строки. Это хорошо, за исключением того, что это единственный массив, который означает, что если на странице есть другие контейнеры, они будут смотреть на тот же массив. Я попытался написать функцию закрытия, но потерпел неудачу. есть идеи?

$(document).ready(function() {
var heights = [];
 computeTableHeights(true);
assignTableHeights();
var windowWidth = $(window).width();

$(window).resize(function() {    
  computeTableHeights(($(window).width() < windowWidth) && ($(window).width() !=   windowWidth));
windowWidth = $(window).width();
     assignTableHeights();  
})

function computeTableHeights(recordBiggestHeights) {
$("table").each(function() {
    var rowIndex = 0;
    var rows = $(this).find("tr");
    $(rows).each(function() {
      var rowHeight = $(this).css("height");
      if (heights[rowIndex] === undefined) {
        heights[rowIndex] = rowHeight;
      } else {
        var existingHeight = parseInt(heights[rowIndex]);
        var currentHeight = parseInt(rowHeight);
        if (shouldChangeHeight(recordBiggestHeights, existingHeight, currentHeight))  {         
             heights[rowIndex] = rowHeight;
        }
      }
      rowIndex++;
    }); 
  });
 }

function shouldChangeHeight(recordBiggestHeights, existingHeight, currentHeight) {
if (existingHeight == currentHeight) {
  return false;
} else if (recordBiggestHeights) {
  return  existingHeight < currentHeight;
} else {
  return  existingHeight > currentHeight;
}
}

function assignTableHeights() {
 $(".container table").each(function() {
    var rowIndex = 0;
    var rows = $(this).find("tr");
    $(rows).each(function() {
      var rowHeight = $(this).css("height");
      if (heights[rowIndex]) {
        var existingHeight = parseInt(rowHeight);
        var targetHeight = parseInt(heights[rowIndex]);         
        if (existingHeight != targetHeight) {
            $(this).css("height", heights[rowIndex]);
        }           
      }           
      rowIndex++;
    }); 
  });
  }
});

Answer 1

Мне кажется, я понимаю, что ты пытаешься сделать. Если нет, пожалуйста, опишите немного требований, которые вы ищете, чтобы я мог пересмотреть этот ответ.

Вы хотите обрабатывать высоты строк каждого контейнера и его дочерних таблиц отдельно. Поправь меня если я не прав

Приведенный ниже код просматривает каждый контейнер отдельно, прежде чем выравнивать высоту строк таблицы.

Вы действительно правы, что хранение всех высот строк для всех таблиц в одном массиве не даст вам требуемых результатов. Вам необходимо создать экземпляр массива для каждого контейнера.

В вашем коде вы читаете CSS для высоты строки. Как только вы установите высоту в CSS, это свойство останется прежним. Я полагаю, что в вашем сценарии использования вам нужна высота строки, как ее рассчитал браузер (jquery предлагает методы для этой цели).

Поэтому при изменении размера свойство css должно быть очищено, прежде чем снова установить его на наибольшую вычисленную высоту.

function resizeHandler() {
    // Treat each container separately
    $(".container").each(function(i, container) {
        // Stores the highest rowheight for all tables in this container, per row
        var aRowHeights = [];
        // Loop through the tables
        $(container).find("table").each(function(indx, table) {
            // Loop through the rows of current table (clear their css height value)
            $(table).find("tr").css("height", "").each(function(i, tr) {
                // If there is already a row height defined
                if (aRowHeights[i])
                    // Replace value with height of current row if current row is higher.
                    aRowHeights[i] = Math.max(aRowHeights[i], $(tr).height());
                else
                    // Else set it to the height of the current row
                    aRowHeights[i] = $(tr).height();
            });
        });
        // Loop through the tables in this container separately again
        $(container).find("table").each(function(i, table) {
            // Set the height of each row to the stored greatest height.
            $(table).find("tr").each(function(i, tr) {
                $(tr).css("height", aRowHeights[i]);
            });
        });
    });
}

$(document).ready(resizeHandler);
$(window).resize(resizeHandler);

У меня есть эта скрипка: http://jsfiddle.net/k5g87/ Вы можете изменить размер окна результатов там.