table内で1行ずつ交互に背景色を変えたい

table内で、1行毎に背景色を変えたい場合、trにいちいちclass名を付けていくのは面倒なもの。

そんな時に見つけたyuga.js（MITライセンス）というスグレモノ。

使い方も簡単で、jQueryとyuga.jsを一緒にhead内で呼び出してあげて、CSSで奇数行（または偶数行）の背景色を指定してあげるだけ。

奇数行、偶数行は、それぞれ下記のように指定。

・「tr. odd td」→奇数行の指定
・「tr. even td」→偶数行の指定

例えば奇数行のtdの背景色を変えたい場合は、下記のような感じでCSSで指定してあげればOK。

table tr.odd td {background: #efefef;}

とっても便利。

※2020年5月24日追記
こちらのページでご紹介している方法は古く、今はCSSのみで調整する方法が主流です。（初学者が混乱しないように追記させていただきました）

最近の投稿