2つのhtmlテーブルがあり、各行を同じ高さにする必要があります。
したがって、テーブル#1の3行目の高さが25の場合、テーブル#2の3行目の高さは25になります。
一致する行の高さが最大の場合、両方の行の高さが同じである必要があります。
これどうやってするの?
私は次のように行をトラバースする方法を知っています:
$("table1 tr").each(function() {
});
$("table2 tr").each(function() {
});
2つのhtmlテーブルがあり、各行を同じ高さにする必要があります。
したがって、テーブル#1の3行目の高さが25の場合、テーブル#2の3行目の高さは25になります。
一致する行の高さが最大の場合、両方の行の高さが同じである必要があります。
これどうやってするの?
私は次のように行をトラバースする方法を知っています:
$("table1 tr").each(function() {
});
$("table2 tr").each(function() {
});
次のようなことができます (両方のテーブルの行数が等しいと仮定します)。
//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);
}
});
ここに例があります。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;
}
});
});