「きにきじ」：今日の気になる記事をきまぐれにご紹介

テーブルやリストの背景を1行ごとに変更する方法：JavaScriptを使うかCSSだけでやるか

Posted at 10:23 on April 9, 2009

Last updated at 02:12 on July 21, 2010

Category: News, Note

Tags: JavaScript, jQuery, Web, ツール, デザイン

» Good Sleep｜Webデザイナーの日々のスキマ: テーブルの背景色を１行おきに変更してみる

テーブルやリストで１行ごとに背景色を変更したいことってけっこうあるんですよね。作ったきり修正がほとんどないようなサイトなら手作業で１行ごとに class 指定していってもまったく問題ないんですが、行を追加・削除するなどの修正を加える機会がそこそこある場合は手作業じゃやってられません。でもご紹介した記事のとおりにやれば１発解決ですね！

まず、jQueryから最新のスクリプトをダウンロードして下さい。
HTMLソースにスクリプトを読み込み、下記のように記述
（例）

<script type="text/javascript"><!--
$(function() {
  (".stripe tr:even").addClass("even");
});
//--></script>

次に適用するtable要素にstripeとclass指定して、CSSで例えば、

.stripe .even td {
  background-color: #FBF8EE;
}

と、定義してみて下さい。

これだけで完成です。
とても簡単にできますね！

 

（クリックで拡大表示）

ちなみに、以下でご紹介する記事では、JavaScript を使わずに CSS だけでテーブルをデザインする方法が紹介されています（上の画像）。

» [使えるCSSテクニックVol.2] CSS を使った見栄えの良いテーブル パート2 | バシャログ。

• colgroup を使って、タテのセルたちをグループ化します。こうすることで、特定のセルに class をあてまくる必要がなくなります。ここでは background と width を指定しました。
• タテ th には class で色をつけたり色を変えたりして情報を読みやすくします。

JavaScript を使うと重くなりがちなので、少しでも動作を軽くしたいという方は CSS オンリーのデザインも参考になさるとよいかと思います。

Table の colgroup および col という要素を利用してデザインしているんですね。この２つの要素はこの記事を読むまで知らなかったので非常に参考になりました。

▲上に戻る▲

よろしければ以下の関連（してそうな）記事もどうぞ！

• 最初や最後の行だけ違うスタイルを可能にするJavaScript「yuga.js」
• CSS3セレクタ非対応ブラウザでも対応ブラウザと同じ動作を実現するJavaScriptライブラリ
• jQueryを使って簡単にフォームの入力チェックができる「jQuery Inline Form Validation Engine」
• 便利そうなjQueryプラグイン10選
• JavaScript のお勉強でストップウォッチを作ってみた

• « 前の記事：スタイルシートを自動でIE6対応にするオンラインサービス「IE6 CSS Fixer」
• » 次の記事：世界で最も革新的な企業は？　Apple、Google、トヨタ、Microsoft、任天堂など

One Response to “テーブルやリストの背景を1行ごとに変更する方法：JavaScriptを使うかCSSだけでやるか”

1. 最初や最後の行だけ違うスタイルを可能にするJavaScript「yuga.js」 | きにきじ より:

   May 16, 2009 10:40

   返信