テーブルのTR要素またはTD要素に、奇数・偶数別々のclass属性値をセットします。
行単位・列単位で奇数・偶数別々のclass属性を指定が可能なので、作業効率も上がります。
例えばCGIやPHPで作成したページでは偶数に特定のclass属性値をセットする事は簡単に出来ますが、HTMLの場合は多少面倒な作業になります。これをJavaScriptでonload時にセットしてしまおうというスクリプトです。
※本スクリプトはjQueryを使用しています オフィシャルサイト
- AutoStripe設置例
- 行単位 偶数(0スタート):class=even(#ffffee)
奇数(1スタート):class=odd(#ffeeee)
既にclass属性が存在している「TD32/TD54」はスキップします。
※注意 インデックスは0からスタートしますので、偶数から始まる事になります
TH1 |
TH2 |
TH3 |
TH4 |
TH5 |
TD10 | TD20 | TD30 | TD40 | TD50 |
TD11 | TD21 | TD31 | TD41 | TD51 |
TD12 | TD22 | TD32 | TD42 | TD52 |
TD13 | TD23 | TD33 | TD43 | TD53 |
TD14 | TD24 | TD34 | TD44 | TD54 |
- 設定
onload="tdStripe('labo', 'even', 'odd', 'row');"
- 設置方法
- 下記のコードを適切な部分に貼り付けてご利用ください。
※下記の例はJavaScriptファイルの場所がhtmlファイルと同階層の場合です。
※重要な部分は赤文字になっています。
※本スクリプトはjQueryを使用しています。
下記のファイルを右クリックから保存でダウンロードしてください。
[ソースコード:autostripe-1.1.0.js]
下記のサイトからjQueryスクリプトをダウンロードして保存してください。
[こちらからjQueryをダウンロードしてください]
※ファイル名にバージョンがついている場合は、その部分を消して頂いても構いません。
<!-- <head>~に記述</head> -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="autostripe.js"></script>
<!-- <head>~に記述</head> -->
<body onload="tdStripe('stripe', 'even', 'odd', 'row');">
<!-- <body>~</body> -->
<table class="stripe">
<tr>
<th>TH1</th>
<th>TH2</th>
<th>TH3</th>
<th>TH4</th>
<th>TH5</th>
</tr>
<tr><td>TD1</td><td>TD2</td><td>TD3</td><td>TD4</td><td>TD5</td></tr>
<tr><td>TD1</td><td>TD2</td><td>TD3</td><td>TD4</td><td>TD5</td></tr>
<tr><td>TD1</td><td>TD2</td><td>TD3</td><td>TD4</td><td>TD5</td></tr>
<tr><td>TD1</td><td>TD2</td><td>TD3</td><td>TD4</td><td>TD5</td></tr>
<tr><td>TD1</td><td>TD2</td><td>TD3</td><td>TD4</td><td>TD5</td></tr>
</table>
<!-- <body>~</body> -->
- 改版履歴
- Ver.1.1.0
- お問い合せ
- バグ・要望のご連絡はこちらへお願い致します。
email:labo@anchor-gr.jp
また、設置方法のアドバイスや設置代行作業(有料)も行っております。お気軽にお問い合せ下さい。