Question

我有2个html表，我需要每行具有相同的高度。

因此，如果表＃1的第3行的高度为25，那么表＃2的第3行的高度应为25。

无论哪个匹配的行具有最大高度，那么两个行应具有相同的高度。

我该怎么做？

我知道如何遍历行：

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

});

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

});

Answer 1

你可以这样做（假设两个表的行数相等）：

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

Answer 2

你可以在这里看到一个例子。 http://jsfiddle.net/anAgent/ZcnEp/

设置高度时，您需要考虑行的边框，因为它会影响高度。我的示例不包括这些代码，但如果您设置边框，则可能需要考虑这些内容。

    $(document).ready(function() {
        var $table1 = $("#Table1");
        var $table2 = $("#Table2");
        $.each($table1.find("tr"), function(i, o) {
            var $t1r = $(o);
            var $t2r = $table2.find('tr').eq(i);
            if ($t2r != undefined) {
                $t1r.height($t1r.height() > $t2r.height() ? $t1r.height() : $t2r.height());
                $t2r.height($t1r.height());
                console.log("t1:r%s | t2:r%s", $t1r.height(), $t2r.height());
            } else {
              return false;
            }
        });
    });

2个表，需要为每个匹配的行设置具有最大高度的行

2 个答案: