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

multiple tables with the same row height using closure

本文关键字：闭包      更新时间：2023-09-26

我有两张并排的桌子。我要做的是让每个表的每一行都在同一个容器中，每一行都有相同的行高。我已经讲了这么多了。

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

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

我想我明白你想干什么了。如果没有，请详细说明一下你所寻找的要求，以便我修改这个答案。

您希望分别处理每个容器及其子表的行高。如果我说错了请纠正我

下面的代码分别遍历每个容器，然后使表行高度相等。

你确实是对的，在一个数组中存储所有表的所有行高度不会得到你需要的结果。你需要为每个容器创建一个数组实例。

在您的代码中，您读取行高度的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/你可以调整结果窗口的大小

相关文章：