jQueryで実装、表データの一括選択 〜第三回〜

テーブルセルの全選択、列・行の選択と引続き最後はセル単体の選択・解除のサンプルを紹介したいと思います。

○第一回：全選択の制御
○第二回：列と行の選択制御
○第三回：個別セルの選択制御　←今回の説明内容

以下制御のサンプルソースです。

$(function() {
	//セルの選択
	$("td").on('click', function() {
		if($(this).hasClass('td_chk') == false) {
			$(this).addClass('td_chk');
		} else {
			$(this).removeClass('td_chk');
		}
	});
});

解説

最後となる今回はテーブルセル単体の選択・解除の制御です。
第一回、第二回とは違いtoggle()での制御を行わない代わりに、if文でセルをクリックした際の条件分岐を行っています。
まずは、on()にイベントハンドラとして「click」を設定します。
※ちなみに、jqueryのバージョンが1.7以上でしたらイベントを設定する際は深く考えずにon()を使っておいた方が便利です。

	//セルの選択
	$("td").on('click', function() {
		if($(this).hasClass('td_chk') == false) {
			$(this).addClass('td_chk');
		} else {
			$(this).removeClass('td_chk');
		}
	});

続いてif文の内容ですが、hasClass()で指定のclassがあるかどうかを確認しています。以下の場合はクリックしたtd要素にクラス名「td_chk」がない（==false）場合は、addClass()でクラス「td_chk」を追加すし、ある場合はremoveClass()でクラス「td_chk」を削除するという内容になっています。

	//セルの選択
	$("td").on('click', function() {
		if($(this).hasClass('td_chk') == false) {
			$(this).addClass('td_chk');
		} else {
			$(this).removeClass('td_chk');
		}
	});

以上で全三回にわたって表データ選択のサンプルをご紹介致しました。
ご意見・ご質問がございましたら是非お聞かせ下さい。