すずしんろぐ

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

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

time 2016/11/14

Tag:

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

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

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

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

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

CSS3のみを利用する方法

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

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

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

jQueryとCSS3を利用する方法

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

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

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

jQueryのみを利用する方法

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

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

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

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

まとめ

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

follow us in feedly

down

コメントする




ファッション

プロフィール

鈴木俊吾(すずしん)

鈴木俊吾(すずしん)

大学卒業後、公務員を目指して試験に合格するも何故か辞退。その後は無職のまま特に何もない無駄な日々を過ごす。その内に精神状態がおかしくなり統合失調症を発症。今までに4度の入院を経験。ただいま絶賛人生のどん底を経験中。そんな私ですが、現在はフリーランスのプログラマーを目指して勉強を進めています。これまでにいくつかのアプリを公開しています。このブログは、人生大逆転を目指して奮闘する私の成長日記(?)です。どうか温かく見守って頂けるとありがたいです。 [詳細]

アクセスカウンター

since: 2016/11/15

人気記事

アーカイブ



ブログ村ランキング