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

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

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



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

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

第三回:個別セルの選択制御

html及びcssは前回と同じものを利用します。
javascriptは前回に以下内容を追加します。

■javascript
$(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');
		}
	});

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



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です