ラック
Home > ブログ > 記事 > 2015年3月 > tableを一行おきに色分けする(※条件付き)

tableを一行おきに色分けする(※条件付き)

カテゴリ: ホームページ

店舗名 住所 詳細
関東地方
店舗1 ほげ町 詳細はコチラ
店舗2 ぴよ町 詳細はコチラ
店舗3 ふが町 詳細はコチラ
店舗4 ほげら町 詳細はコチラ
東北地方
店舗1 ほげほげ町 詳細はコチラ
関西地方
店舗1 ふー町 詳細はコチラ
店舗2 ばー町 詳細はコチラ
店舗3 ばず町 詳細はコチラ
店舗4 くくす町 詳細はコチラ
店舗5 くーくす町 詳細はコチラ

上記のような表があったとします。なお、ソースは

<table id="foo">
	<tr>
		<th>店舗名</th>
		<th>住所</th>
		<th>詳細</th>
	</tr>
	<tr>
		<th colspan="3">関東地方</th>
	</tr>
	<tr>
		<td>店舗1</td>
		<td>ほげ町</td>
		<td><a href="#">詳細はコチラ</a></td>
	</tr>
	<tr>
		<td>店舗2</td>
		<td>ぴよ町</td>
		<td><a href="#">詳細はコチラ</a></td>
	</tr>
	<tr>
		<td>店舗3</td>
		<td>ふが町</td>
		<td><a href="#">詳細はコチラ</a></td>
	</tr>
	<tr>
		<td>店舗4</td>
		<td>ほげら町</td>
		<td><a href="#">詳細はコチラ</a></td>
	</tr>
	<tr>
		<th colspan="3">東北地方</th>
	</tr>
	<tr>
		<td>店舗1</td>
		<td>ほげほげ町</td>
		<td><a href="#">詳細はコチラ</a></td>
	</tr>
	<tr>
		<th colspan="3">関西地方</th>
	</tr>
	<tr>
		<td>店舗1</td>
		<td>ふー町</td>
		<td><a href="#">詳細はコチラ</a></td>
	</tr>
	<tr>
		<td>店舗2</td>
		<td>ばー町</td>
		<td><a href="#">詳細はコチラ</a></td>
	</tr>
	<tr>
		<td>店舗3</td>
		<td>ばず町</td>
		<td><a href="#">詳細はコチラ</a></td>
	</tr>
	<tr>
		<td>店舗4</td>
		<td>くくす町</td>
		<td><a href="#">詳細はコチラ</a></td>
	</tr>
	<tr>
		<td>店舗5</td>
		<td>くーくす町</td>
		<td><a href="#">詳細はコチラ</a></td>
	</tr>
</table>

こんな感じ。さて、この表はこのままだと見づらいので背景色を交互に色分けできたりすると見やすくなると思います。

しかもできれば

店舗名 住所 詳細
関東地方
店舗1 ほげ町 詳細はコチラ
店舗2 ぴよ町 詳細はコチラ
店舗3 ふが町 詳細はコチラ
店舗4 ほげら町 詳細はコチラ
東北地方
店舗1 ほげほげ町 詳細はコチラ
関西地方
店舗1 ふー町 詳細はコチラ
店舗2 ばー町 詳細はコチラ
店舗3 ばず町 詳細はコチラ
店舗4 くくす町 詳細はコチラ
店舗5 くーくす町 詳細はコチラ

こんな風に、地方ごとに色分けが並んでいて欲しいです。

しかし、この場合だと「tr:nth-child(2n) td」のようなcssの指定だと「○○地方」のところがネックとなり、上手く色分けできません。

しかもこの表、店舗を増やしたり減らしたりする度に行を追加・削除するという作業を手動で行う表だとしたら…?

とてもではないですが、編集する度に一々色分けのstyleやclassを付けたり消したりしなければなりません。増やすならまだしも、消すときは悲惨です。

例えば、関西地区の店舗1を削除するとなったら、その下にある全ての行に対してstyleあるいはclassを付けたり消したりし直さなければなりません。

さて、どうしたものか…。

var i = 0;
$("#foo tr").each(function() {
	var FirstThAttr = $(this).children("th").attr("colspan");
	if(FirstThAttr == "3") {
		i = 0;
	}
	else {
		if(i % 2) {
			$(this).addClass("white");
		}
	}
	i++;
});

ここはもう動的にやるしかない。ということでサクッとjQueryで処理させちゃいましょう。上のスクリプトだと、whiteというクラスを付けることになるので.whiteに対してbackground-colorを指定するcssを書けば良いでしょう。

…しかし、もっとスマートなやり方ないのかなぁ…。

タグ: jQuery, 手順

 



関連する記事一覧