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/ 您可以在那里调整结果窗口的大小。

使用闭包具有相同行高的多个表

1 个答案: