2つのテーブルを並べて1つのテーブルに見せたい場合、
片方のテーブルのセルに内容を詰め込みすぎると、改行の都合で2テーブルの高さがずれてしまうことがあります。
こうした自体を避けるため、2つのテーブルの高さを同期させるスクリプトを描いたので載せておきます
$(function(){
'use strict';
var table1_tr = $("#table1 tr");
var table2_tr = $("#table2 tr");
for(var i=0, l=table1_tr.length; i<l;i++ ){
var table1_cells = table1_tr.eq(i).children();
var table2_cells = table2_tr.eq(i).children();
var table1_cells_height = table1_cells.height();
var table2_cells_height = table2_cellss.height();
if(table1_cells_height > table2_cells_height){
table2_cells.height(table1_cells_height);
} else if(table2_cells_height > table1_cells_height){
table1_cells.height(table2_cells_height);
}
}
});
やっていることを簡潔にまとめると
- 2つのテーブルの一番上から順に行を取得
- 取得した行の高さを比較
- 高い方に合わせる
ということです。
.eq(i)はセレクターに該当する要素でi番目に登場しているもの、という意味で
今回の場合はtable1のi番目のtrという意味になります。