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のみで調整する方法が主流です。(初学者が混乱しないように追記させていただきました)

>お仕事中の気分転換にこちらもどうぞ。

8月 23, 2011 | No Comments

Comments

Leave a Reply