Web うぇっ部

テーブルを縞々（ストライプ）にする(デモダウンロードはこちら）

javascriptを一から書くのは、なかなか大変だけどjQueryを使えばなんとCSSセレクタを使ったり、CSSプロパティの追加・変更が簡単に出来ることを知り、最近すっかりはまっています。

たとえば、全てのspan要素のフォントのカラーを赤にするための記述をjQueryで書くと

$('span').css('color','#f00');だけで済みます。
javascriptで書けば「げっとえれめんつなんちゃら･･･」と長々と書かなければなりません。

 

jQueryで、テーブルを縞々にするには、まずjQueryをダウンロードしてきてhtmlから読み込みます。

<script type="text/javascript" src="js/jquery.js"></script>

そして以下のソースをhead内に書くんですが、今回はstripe.jsという名前でファイルを作っておきましたので（stripe.jsをダウンロード)同じようにhtmlから読み込んでください。
<script type="text/javascript" src="js/stripe.js"></script>

window.onload=function(){ $('table.stripe tr:even').css('background-color','#fc0'); $('table.stripe tr:odd').css('background-color','#999'); }

このstripe.jsですがtableにclass名stripeを付けたテーブルを縞々にします。

<table class="stripe">
<tr><td>大阪</td><td>200円</td></tr>
<tr><td>京都</td><td>300円</td></tr>
</table>

縞々の色を変えるには、stripe.jsのcolorの部分を変更すればOKです。

htmlのテーブルに縞々にする為に余分なクラスをつける必要がないので、項目を追加・削除するときも普通に追加・削除すれば勝手に縞々になります。