【jQuery】2つのテーブルの高さを揃える

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という意味になります。