トップページ > Ajaxライブラリ使用サンプル集 > テーブル行の自動色変更
Ajaxライブラリ使用サンプル集
テーブル行の自動色変更
tableで作った表を読みやすくするために、行（tr td）の色を交互に変えることがよくあるが、手作業でなく自動的にカラーリングする方法が便利。行が増減する場合も自動的に色を交互につけてくれる。
「jQuery」と、Nakamura, kyosuke氏による「yuga.js」を使う。
HTML上の指定なしで交互にカラーリングできている。
| 発売日 | おすすめメニュー | 特別価格 |
|---|---|---|
| 2009.06.04 | ピッツァブルチェネッラとワインビネガーのミックスサラダ | 3,800円 |
| 2009.05.31 | ピッツァオルトラーナとナスとチーズのオーブン焼き | 3,350円 |
| 2009.05.22 | ピッツァマルゲリータとクルミとチーズとリンゴのサラダ | 2,500円 |
| 2009.05.12 | ピッツァマリナーラとモッツァレラチーズとバジルのサラダ | 2.500円 |
このテーブルに行を増やしても、自動的にカラーリングができる。
| 発売日 | おすすめメニュー | 特別価格 |
|---|---|---|
| 2009.06.12 | ピッツァアマルフィとフルーツトマトのサラダ | 3,100円 |
| 2009.06.04 | ピッツァブルチェネッラとワインビネガーのミックスサラダ | 3,800円 |
| 2009.05.31 | ピッツァオルトラーナとナスとチーズのオーブン焼き | 3,350円 |
| 2009.05.22 | ピッツァマルゲリータとクルミとチーズとリンゴのサラダ | 2,500円 |
| 2009.05.12 | ピッツァマリナーラとモッツァレラチーズとバジルのサラダ | 2.500円 |
jquery.jsを読み込む
jQueryとは、John Resig氏によって開発された、Ajax (Asynchronous JavaScript + XML) ライブラリ。
読み込むには、jQueryサイトから、最新版をダウンロードし、外部jsファイルとして読み込む。
または、Googleの「The AJAX Libraries API」経由でjQueryをダウンロードさせることもできる。
Google AJAX Libraries APIでは、jQueryのほかに、Prototype、script.aculo.us、MooTools、Dojoがサポートされている。
(関連記事)
この方法のほうが、
・バージョンを最後まで指定しないことによって最新版が供給される。
・自分のサーバに置くより軽い。
などのメリットがある。
このページのサンプルはこちらの方法で読み込んで作っている。
<script type="text/javascript">google.load("jquery", "1.2");</script>
jQueryの現在（2009.04.23）のバージョンは1.3.xだが、一部のブラウザで動作しないとのことなので1.2にしておく。
たまにバージョンチェックは必要だが、常に最新版にすると対応できない古めのブラウザが出てくることは事実。悩ましいところ。
yuga.jsを読み込む
Nakamura, kyosuke氏のサイトから「yuga.js」の最新版をダウンロードし、外部jsファイルとして読み込む。これを<head>部に書き込むとき注意が必要なのは、先程ロードした「jQuery」の後に書くこと。
「jQuery」「yuga.js」とも書き込むと<head>部はこのようになる。<script type="text/javascript">google.load("jquery", "1.2");</script>
<script type="text/javascript" src="../js/yuga.js"></script> ←自分がyuga.jsを置いたパスを書く
テーブルの奇数行（または偶数行）に色指定をする
目的のテーブルにCSSでデザインの指定をするが、ここで重要なのは、
・「tr. odd td」で奇数行の指定
・「tr. even td」で偶数行の指定
をしておくこと。どちらか一方だけでかまわない。「odd」か「even」で奇数行か偶数行のデザインを変更するのがミソ。先程の「yuga.js」が自動的にCSSをあてがってくれる。
border-top: 1px solid #999999;
border-left: 1px solid #999999;
border-collapse:collapse;
border-spacing:0;
}
#main table th,
#main table td{
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
padding:5px;
}
#main table th {
background: #448960;
color: #FFFFFF;
}
#main table tr.odd td { ←奇数行（odd）の背景色を指定
background: #efefef;
}