Question

I have 2 html tables, I need to have each row with the same height.

So if table#1’s 3rd row has a height of 25, then table#2’s 3rd row should have a height of 25.

Whichever matching row has the largest height, then both rows should have the same height.

How can I do this?

I know how to traverse the rows like:

$("table1 tr").each(function() {

});

$("table2 tr").each(function() {

});

Answer 1

You can do something like this (assuming both tables have an equal amount of rows):

//for each row in table one
$("#table1 tr").each(function(index, element){

    //get row height from table1 and the corresponding row in table two
    var rowOneHeight = $(this).height();
    var rowTwo = $("#table2 tr:eq(" + index + ")");

    //if no matching row was found in table two, stop loop
    if(!rowTwo.length) return false;

    var rowTwoHeight = rowTwo.height();

    //compare row heights, and set the least high row to the height of the highest one
    if(rowOneHeight > rowTwoHeight){
        //set rowTwoHeight to rowOneHeight
        rowTwo.height(rowOneHeight);
    }else{
        $(this).height(rowTwoHeight);
    }
});