DOE HOME > Web技術Tips > JavaScript > テーブルの高さを揃えるプラグインのメモ

category_07_m

テーブルの高さを揃えるプラグインのメモ

Pocket

tableTile-image02

 

こういう2カラムで並んだテーブルを、最後のセルで調整して揃えるという依頼がありました。

 

最初はググって出てきたのでなんとかする予定だったのですが、それっぽいのが見つからず、自分でコードを書いてなんとかしたのでその方法について書きたいと思います。

仕組みを考える

  • 2つ要素の高さの差を計算し、高さが低い方のtableの最後のtr要素に差を足す
  • 適用させる場所にはクラスをつけるだけでOK
  • 3カラム以上は無視
  • レスポンシブデザイン対応
  • スマホ(ブラウザ幅600以下)のときは1カラムになる
  • tableがいっぱいあるパターンにも対応させる
  • リサイズ時の途中で高さの大小関係が反対になるパターンを考慮する
  • ちゃんと動くこと

途中経過

とりあえず書いたJSがこちら。

 

$(window).on("load resize",function() {
	//変数
	var $table = $("table.table-tile");
	var tableHeight = [];
	var $tableLast = $table.find("tr:last");
	var windowWidth = window.innerWidth;

	//リセット
	$tableLast.each(function(){
		$(this).attr("style","");
	});

	$table.each(function(time){
		//スマホ以外
		if(windowWidth > 600) {
			tableHeight[time] = $(this).outerHeight();
			if((time + 1) % 2 == 0) {//偶数回目に実行される
				var tableHeightDistance = tableHeight[time-1] - tableHeight[time];
				if(tableHeightDistance > 0) {
					//左側のほうが大きい場合
					var tableLastHeight = $table.eq(time).find("tr:last").outerHeight();
					$table.eq(time).find("tr:last").css({"height":tableLastHeight + tableHeightDistance});

				} else if(tableHeightDistance < 0) {
					//右側のほうが大きい場合
					tableHeightDistance *= -1;
					var tableLastHeight = $table.eq(time-1).find("tr:last").outerHeight();
					$table.eq(time-1).find("tr:last").css({"height":tableLastHeight + tableHeightDistance});
				}
			}
		};
	});
});

ロード時とリサイズ時に一連のコードが実行されるので、レスポンシブデザインサイトに対応しています。

つまずいたポイント

『仕組みを考える』で太字にした点はすべて引っかかりました。

 

tableがいっぱいあるパターン

tableLastHeightという変数はtableの高さの差を意味するのですが、これは毎回リセットしないとすべてのtableの高さが同じになってしまいます。

 

途中で高さの大小関係が反対になるパターン

大小関係が反対になった瞬間を見分ける計算方法ですが、常に左側の要素から右側の要素を引いた値を求めます。

 

値が正なら左側が大きく、負なら右側が大きくなり、同じなら同じ大きさです。

 

ちゃんと動くこと

言うまでもないですね。

プラグイン化する

今のコードに少し手を加えます。

 

$("table.table-tile").tableTile();

こういういかにもjQueryという感じの記述を使うにはプラグインを作成します。

参考サイト

プラグイン作成 · GitHub

 

このページが分かりやすかったです。

基本形

プラグインを作る際の基本形があるので引用します。

 

(function($) {
    $.fn.tileResponsive = function() {

        // ここにあなたの素敵なプラグインを詰め込んでください

    };
})(jQuery);

$.fnという見慣れない文字列が出てきましたが、これはjQuery.fnオブジェクトといって、この文字列にプラグイン名を連結させます。

 

今回は使わないのですが、引数を渡すには

 

function(options)

のようにすればOKです。

DOM要素をプラグイン内で使うには

揃えたいtable要素である$("table.table-tile")をプラグインの中で扱う方法についてです。

 

jQueryのルール的に$(this)と思いきや、プラグインの中では単純にthisでOKです。

完成

プラグインの基本形を元に作ってみたのがこちら。

 

プラグイン

jquery.tableTile.jsというファイルを作ってhead内で読み込ませます。

 

(function($) {
	$.fn.tableTile = function() {
		//変数
		var $table = this;
		var tableHeight = [];
		var $tableLast = $table.find("tr:last");
		var windowWidth = window.innerWidth;

		//リセット
		$tableLast.each(function(){
			$(this).attr("style","");
		});

		return this.each(function(time){
			//スマホ以外
			if(windowWidth > 600) {
				tableHeight[time] = $(this).outerHeight();
				if((time + 1) % 2 == 0) {//偶数回目に実行される
					var tableHeightDistance = tableHeight[time-1] - tableHeight[time];
					if(tableHeightDistance > 0) {
						//左側のほうが大きい場合
						var tableLastHeight = $table.eq(time).find("tr:last").outerHeight();
						$table.eq(time).find("tr:last").css({"height":tableLastHeight + tableHeightDistance});

					} else if(tableHeightDistance < 0) {
						//右側のほうが大きい場合
						tableHeightDistance *= -1;
						var tableLastHeight = $table.eq(time-1).find("tr:last").outerHeight();
						$table.eq(time-1).find("tr:last").css({"height":tableLastHeight + tableHeightDistance});
					}
				}
			};
		});
	};
})(jQuery);

 

呼び出し

$(window).on("load resize",function() {
	$("table.table-tile").tableTile();
});

これで一応動きました。

メソッドチェーンに対応させる

メソッドチェーンというのは、$("h1").next().hide() ~~ みたいに繋げて書けるというアレです。

 

プラグインの最後でthisを返すことで、メソッドチェーンが使えるようになります。

 

上のコードではreturnの後に何やらeachメソッドが書かれていますが、プラグインが固有の値を返す場合はこういう書き方になります。

まとめ

前半はテーブルを揃える仕組みについて、後半はjQueryのプラグインの作り方についてまとめました。

 

いままでjQueryのプラグインを独自に作るという発想はなかったのですが、なんでもやってみるものですね。

 

読んでいただきありがとうございました。

Pocket

ホームページ制作のお見積額が40万円以上で、20%OFFキャンペーン

カテゴリ

人気記事ランキング

  1. Google Mapがエラーで表示されなくなった場合の直し方
  2. 無料で使える明朝体の日本語WEBフォント
  3. WordPressの『get_categories』でカテゴリーリストを自由にカスタマイズする
  4. CSS Table displayについて見直してみる
  5. SNSのシェアボタンを自前のコードで設置する際のリンク設定まとめ

最近の投稿

月別アーカイブ

ブログ内検索

ホームページ制作のお問い合わせは横浜のDOEで。