4
Jul
Jul
超簡単！ jQueyを使った一行毎に色を変えるテーブルデザイン
[ css : javascript : jQuery : webデザイン ]
各種のデータや、リストなどで表組の表現を用いる時に、テーブル（table）タグを使用する事があります。その方がすっきりと見せれる事が多いしタグとCSSのクラスも少なくて済みそうかなと思います。そこでさらに、少し見やすくするのに、一行毎に背景色を変えて表示させることで、見やすさが上がり難解なデータ類の表示もわりとすんなりと伝えることがでそう。そんなことを超簡単にできるのが、このjQuery。素晴らしいです。
まずは、jQueryのライブラリ本体をダウンロード。
ダウンロードは、ココからダウンロードして、所定のディレクトリにあげておきます。自分の環境ではすでにjquery.jsはありますので、そのまま利用します。読み込みの設定と、一行毎にクラスを割り振るjavascriptを記述
<script>
window.onload = function(){
$("tr:nth-child(odd)").addClass("odd");
};
</script>
で、head内にも、protype.jsの読み込みの記述を
<script src="jquery.js"></script>
スタイルシートの調整
jQueryを組み込む前に大方色身やボーダーのカラーとかのデザインはグラフィック系のアプリケーションでやっておいた方がいいですが、とりあえずは、この記述を加える。
tr.odd {
background: #D6D9C8;
color: #FFF;
}
ここだけ
コメントする