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

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

jQueryを利用して複雑なテーブルセルの選択制御を出来るだけ簡単に作成しました。とは言えソースが長くなってしまったので、実装内容に合わせて全3回に別けて紹介します。



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

第一回は下地づくりと最も簡単な全選択の制御です。

第一回:全選択の制御

まずは、サンプルのソースを。
htmlは当然tableで整形します。

■html
<table style="width: 100%;">
<thead>
<tr>
<th id="all">全て選択</th>
<th>果物</th>
<th>動物</th>
<th>植物</th>
</tr>
</thead>
<tr>
<th>人気1位</th>
<td>リンゴ</td>
<td>ぞう</td>
<td>バラ</td>
</tr>
<tr>
<th>人気2位</th>
<td>バナナ</td>
<td>ゴリラ</td>
<td>チューリップ</td>
</tr>
<tr>
<th>人気3位</th>
<td>もも</td>
<td>パンダ</td>
<td>パンジー</td>
</tr>
</table>
■css
.td_chk {
  background: red;
}
#all {
  text-decoration: underline;
  cursor: pointer;
}
■javascript
$(function() {
	//全選択
	$("#all").toggle(
		function() {
			$(this).text('全て解除');
			$(this).parent().parent().parent().find('td').each(function() {
				$(this).addClass('td_chk');
			});
		}, function() {
			$(this).text('全て選択');
			$(this).parent().parent().parent().find('td').each(function() {
				$(this).removeClass('td_chk');
			});
	});

});
解説

動作としては一番左上のセル「全て選択」のテキストをクリックすると要素tdの背景色を変更します。
変更後は「全て解除」をクリックすると元の背景色に戻します。
今回はサンプルのhtmlをシンプルにする為table内にハンドラを設置しました。

まずは必要となるcssの説明です。
class「td_chk」は要素tdの背景色をredにする為のcssです。
id「all」はtd全選択のイベントハンドラとなるidです。

.td_chk {
  background: red;
}
#all {
  text-decoration: underline;
  cursor: pointer;
}

続いてスクリプトの説明ですが、今回はtoggle()イベントを利用します。toggle()に第一関数と第二関数を設定することによりクリックする度に第一関数→第二関数→第一関数→第二関数・・・・と繰り返します。

$(function() {
	//全選択
	$("#all").toggle(
		function() {
			$(this).text('全て解除');
			$(this).parent().parent().parent().find('td').each(function() {
				$(this).addClass('td_chk');
			});
		}, function() {
			$(this).text('全て選択');
			$(this).parent().parent().parent().find('td').each(function() {
				$(this).removeClass('td_chk');
			});
	});

});

まず第一関数でid「all」をクリックした際にテキストを「全て解除」に書き換えます。そしてparent()で親(tr)の親(thead)の親(table)を指定し、更にfind()でtd要素見つける度に、class「td_chk」をaddClass()を利用して追加していきます。
これで全てのtd要素にclass「td_chk」がセットされ背景色が赤になります。

$(function() {
	//全選択
	$("#all").toggle(
		function() {
			$(this).text('全て解除');
			$(this).parent().parent().parent().find('td').each(function() {
				$(this).addClass('td_chk');
			});
		}, function() {
			$(this).text('全て選択');
			$(this).parent().parent().parent().find('td').each(function() {
				$(this).removeClass('td_chk');
			});
	});

});

次に第二関数に、元の状態(解除)に戻す処理を書きます。
まずtext()で、テキスト内容を「全て選択」に戻します。td要素に対しても今度はremoveClassで全てのtdからclass「td_chk」を削除します。

$(function() {
	//全選択
	$("#all").toggle(
		function() {
			$(this).text('全て解除');
			$(this).parent().parent().parent().find('td').each(function() {
				$(this).addClass('td_chk');
			});
		}, function() {
			$(this).text('全て選択');
			$(this).parent().parent().parent().find('td').each(function() {
				$(this).removeClass('td_chk');
			});
	});

});

ここまででセルの全選択・全解除が実装できたかと思います。

次回は、今回内容にプラスして列と行の一括選択を実装したいと思います。
○第二回:列と行の選択制御



コメントを残す

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