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

表データの選択制御第二回は列と行の制御です。列と行をjQueryを使って一括制御します。

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

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

第二回：列と行の制御

htmlとcssサンプルのソースは前回のものから若干の修正・追加をします。

<table style="width: 100%;">
<thead>
<tr>
<th id="all">全て選択</th>
<th class="row">選択↓</th>
<th class="row">選択↓</th>
<th class="row">選択↓</th>
</tr>
</thead>
<tr>
<th class="col">選択→</th>
<td>リンゴ</td>
<td>ぞう</td>
<td>バラ</td>
</tr>
<tr>
<th class="col">選択→</th>
<td>バナナ</td>
<td>ゴリラ</td>
<td>チューリップ</td>
</tr>
<tr>
<th class="col">選択→</th>
<td>もも</td>
<td>パンダ</td>
<td>パンジー</td>
</tr>
</table>

■css

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

javascriptは前回の全選択制御に追加で列と行の制御を加えます。

■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');
			});
	});
	//列の選択
	$(".row").toggle(
		function() {
			$(this).text('解除↓');
			var num = $(".row").index(this);
			$("#sample tbody tr").each(function() {
				$(this).find("td").eq(num).addClass('td_chk');
			});
		}, function() {
			$(this).text('選択↓');
			var num = $(".row").index(this);
			$("#sample tbody tr").each(function() {
				$(this).find("td").eq(num).removeClass('td_chk');
			});
	});

	//行の選択
	$(".col").toggle(
		function() {
			$(this).text('解除→');
			$(this).parent().find('td').each(function() {
				$(this).addClass('td_chk');
			});
		}, function() {
			$(this).text('選択→');
			$(this).parent().find('td').each(function() {
				$(this).removeClass('td_chk');
			});
	});
});

解説

今回は列と行を一括選択・解除するハンドラとしてclass「row」と「col」を用意しました。
class「row」をクリックするとクリックした列を一括選択し、class「col」をクリックすると行を一括で選択します。

まずは列の選択です。

	//行の選択
	$(".row").toggle(
		function() {
			$(this).text('解除↓');
			var num = $(".row").index(this);
			$("#sample tbody tr").each(function() {
				$(this).find("td").eq(num).addClass('td_chk');
			});
		}, function() {
			$(this).text('選択↓');
			var num = $(".row").index(this);
			$("#sample tbody tr").each(function() {
				$(this).find("td").eq(num).removeClass('td_chk');
			});
	});

クリックした列を判別する為に変数「num」にクリックされた列の番号を格納し、eachでtr枚に「num」番目のtdにclass「td_chk」をaddClassで追加していきます。
解除も同様です。

行の選択・解除はもっとシンプルで、以下のようにクリックされたclass「col」の親（tr要素）からfindでtd要素をが見つかるたびにaddClassでtdに対してclass「td_chk」を追加していきます。

$(function() {
	//行の選択
	$(".col").toggle(
		function() {
			$(this).text('解除→');
			$(this).parent().find('td').each(function() {
				$(this).addClass('td_chk');
			});
		}, function() {
			$(this).text('選択→');
			$(this).parent().find('td').each(function() {
				$(this).removeClass('td_chk');
			});
	});

前回のセルの全選択・全解除に続き、列と行の制御も実装できたかと思います。

最後は、セル単体の選択・解除を実装したいと思います。
○第三回：個別セルの選択制御