2

2つのhtmlテーブルがあり、各行を同じ高さにする必要があります。

したがって、テーブル#1の3行目の高さが25の場合、テーブル#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 に答える