すずろぐ

人生大逆転を目指す、鈴木俊吾の成長日記

スポンサーリンク

CSS3 jQuery tableの背景色を1行毎に交互に変更する方法

tableの背景色を交互に変更する

こんにちは、すずしんです。

ブログやホームページでtableを表示した時に…。 並んでいる行が多くなるとだんだん読みづらくなってきますよね。 そんな時には、1行毎に交互に背景色を変更してあげるとスッキリ見やすくなります。

今回の記事では、そのtableの背景色を偶数と奇数の行で交互に変更する方法について紹介します。 jQueryCSS3を使っていきます。

tableの背景色を交互に変更する方法

CSS3のみを利用する方法

CSS3には「:nth-child」というセレクタがあります。 これを用いると、n番目の子要素に対して特定のスタイルを適用することができます。 例えば、divタグの3番目のpタグを太字表示にしたい場合には以下のように指定できます。

div p:nth-child(3) { font-weight: bold; }

これを利用して、偶数行と奇数行で背景色を変更する処理は以下のように記述できます。 background-colorの設定はお好みで。

table tr:nth-child(odd) {
  background-color: #fcfcfc;
}
table tr:nth-child(even) {
  background-color: #eeeeee;
}

この場合、tableの一番上の行が1番目、その次が2番目…とカウントされます。 そのため、1番目の行が奇数行、2番目の行が偶数行となります。

jQueryとCSS3を利用する方法

jQueryで同様の事を行う場合、odd/evenセレクタを使えば実現可能です。 例えば、奇数行にoddクラス、偶数行にevenクラスを付加するには以下のようにします。

$(function() {
  $("table").find("tr:odd").addClass("odd");
  $("table").find("tr:even").addClass("even");
});

すると、CSSで予め設定してあるoddクラス、evenクラスの場合の背景色が適用されます。 この場合、一番上から0,1,2番目となるため、最初の行はevenクラスが付与される点に注意してください。

.odd {
  background-color: #fcfcfc;
}
.even {
  background-color: #eeeeee;
}

また、jQueryにはnth-childセレクタがあります。 これを使っても同様にできます。 こちらの場合、CSS3と同じように1番目の行がodd、2番目の行がevenクラスが付加されます。

$(function() {
  $("table").find("tr:nth-child(odd)").addClass("odd");
  $("table").find("tr:nth-child(even)").addClass("even");
});

jQueryのみを利用する方法

ちなみに、背景色の変更はjQueryで直接変更することも可能です。 その場合、tableの偶数行・奇数行の要素をfindして、それぞれの要素に対してcss関数を使います。

$(function() {
  $("table").find("tr:nth-child(odd)").css("background-color", "#f5f5f5");
  $("table").find("tr:nth-child(even)").css("background-color", "#e9e9e9");
});

こちらの方法で試しにtableの表示をしてみました。 それがこちらになります。 確かに、1行毎に交互に行の背景色が変更されているのが分かりますね。

歌手名好きな曲
水樹奈々深愛/ETERNAL BLAZE/SUPER GENERATIONなど
TUBEあー夏休み/プロポーズ/風に揺れるTomorrowなど
ナオト・インティライミタカラモノ ~この声がなくなるまで~/今のキミを忘れない/Braveなど
いきものがかりYELL/ブルーバード/じょいふるなど

この表示をするためのソースコードは以下のような感じです。 jQueryの部分の書き方が若干変わっていますが、やっていることは同じです。

<table>
<tr><th>歌手名</th><th>好きな曲</th></tr>
<tr><td>水樹奈々</td><td>深愛/ETERNAL BLAZE/SUPER GENERATIONなど</td></tr>
<tr><td>TUBE</td><td>あー夏休み/プロポーズ/風に揺れるTomorrowなど</td></tr>
<tr><td>ナオト・インティライミ</td><td>タカラモノ ~この声がなくなるまで~/今のキミを忘れない/Braveなど</td></tr>
<tr><td>いきものがかり</td><td>YELL/ブルーバード/じょいふるなど</td></tr>
</table>

<script type="text/javascript">
jQuery(function($){
  $('table').find('tr:nth-child(odd)').css('background-color', '#f5f5f5');
  $('table').find('tr:nth-child(even)').css('background-color', '#e9e9e9');
})(jQuery);
</script>

まとめ

今回の記事では、tableの背景色を1行毎に交互に変更する方法について紹介しました。 具体的には、CSSのみ、jQueryCSSjQueryのみ、と3つのパターンがあります。 あなたの好きな方法で実装してくださいね。