使用閉包的相同行高的多個表格

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/ 您可以在裏面調整結果窗口。