2

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

因此，如果 table#1 的第 3 行的高度为 25，则 table#2 的第 3 行的高度应为 25。

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

我怎样才能做到这一点？

我知道如何遍历行，例如：

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

});

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

});
4

2 回答 2

5

您可以执行以下操作（假设两个表的行数相等）：

//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);
    }
});
于 2012-08-28T16:07:36.560 回答
0

你可以在这里看到一个例子。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;
            }
        });
    });​
于 2012-08-28T16:35:21.753 回答