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で個別に色を変えてあげれば問題ないかなと。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
