THE SAUNA これが噂のパラダイス
THE SAUNA これが噂のパラダイス
2010.12.01

tableの背景色を一行ごとに替えるjQueryの小技

姐さん

tableの背景色を1行ごとに替えたいときに覚えておきたいjQueryの小技。


tableの背景色を一行ごとに替えたい時、<tr class=”color”>みたいな感じにtrのクラスを分けて色替えしたりするかと思うのですが、急に項目が増えた!?なんてときに行数が多ければ多いほど混乱しますよね?

そんなときにもお役立ち!jQuery先生。
高機能なプラグインもいろいろありますが、単純に色だけかわってりゃいいの!って時にはこんなに簡単な記述でいけちゃいます。

head内にjQueryライブラリと、以下のようなスクリプトを記述します。

<head>

<script src="ドメイン名/js/jquery-1.2.3.min.js"></script>

<script type="text/javascript">
$(function(){
	$('table.table01 tr:even').addClass('bg_even'); // 偶数行
	$('table.table01 tr:odd').addClass('bg_odd');	// 奇数行
});
</script>

</head>

これで、table01というクラス名のついたtable内の偶数行のtrには「bg_even」、奇数行のtrには「bg_odd」というクラス名が自動で追加されます。

そんでもって、CSSでそれぞれ別の背景色を設定しておきます。

.table01 tr.bg_even {
background:#f2f2f2;}

.table01 tr.bg_odd {
background:#fff;}

これで、どんだけ項目が増えても、偶数行、奇数行それぞれ自動で色分けされるtableの出来上がりです。

ちなみに1行目は0行扱いとして偶数行になるみたいです。
1行目は別の色がいいよ!ってときは<th>とかにしておいて、CSSで個別に色を変えてあげれば問題ないかなと。