About this script

table要素にclass指定するだけで、その中のtr要素に対して交互にクラス名を割り当てるスクリプト。prototype.js使用版と通常版の2種類を用意しました。

MITライセンス

ストライプテーブル

サンプル

th1 td1
th2 td2
th3 td3
th4 td4
th5 td5

設置方法

  1. まず、ファイル一式をダウンロードします。
    通常版 | prototype.js利用版
  2. stripedtableを使いたいHTMLファイルにjavascriptを読み込みます。 
    <script src="js/stripedtable.js" type="text/javascript"></script>
    prototype.js版を使う場合は先にprototype.jsを読み込みます。 
    <script src="js/prototype.js" type="text/javascript"></script>
<script src="js/stripedtable_proto.js" type="text/javascript"></script>
  3. テーブルに設定するクラス名や、trに対して自動的に付加されるクラス名を変える場合はstripedtable.jsの設定部分をテキストエディタで変更します。
  4. CSSに付加されたクラス名に対してスタイルを設定します。 
    /* 例 */ 
tr.oddline {
	background-color:#efefef;
}
  5. 交互にクラスをつけたいテーブルに対してクラスを設定します（デフォルトではstripedtable）。