Question

I have two tables, side by side. What I am trying to do is have each row of each table that is in the same container have the same row height per row. I have gotten that far with this.

The way it works is you have an array thay grabs the row heights of each table and uses the largest height for each row. Thats fine except as its a single array that means if there are other containers on the page they will look at the same array. I tried writting a closure function but failed. any ideas?

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

I think I understand what you’re trying to do. If not, please elaborate a little on the requirements you’re looking for, so I can revise this answer.

You want to treat the row heights of each container and its child tables separately. Correct me if I’m wrong

The code below loops through each container separately, before equalizing the heights of the table rows.

You are indeed right that storing all row heights for all tables in one array will not get you the results you need. You would need to create an array instance per container.

In your code you read out the css for the height of the row. Once you set the height in the css, this property will stay the same. I believe in your use-case you need the height of the row as the browser has calculated it (jquery offers methods for this purpose).

Therefore, on resizing, the css property should be cleared, before setting it again to the greatest calculated height.

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

I have this fiddle: http://jsfiddle.net/k5g87/
You can resize the result window in there.