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

Question

我有两张并排的 table 。我想做的是让同一容器中每个表的每一行具有相同的行高。我已经做到了这一点。

它的工作方式是你有一个数组，它获取每个表的行高并使用每行的最大高度。这很好，除了它是一个单个数组，这意味着如果页面上有其他容器，它们将查看同一个数组。我尝试编写一个闭包函数但失败了。有任何想法吗？

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

我有这个 fiddle :http://jsfiddle.net/k5g87/您可以在其中调整结果窗口的大小。