オープンソース JavaScript:AutoStripeを公開
電話番号：022-342-1556 ファックス：022-342-1557
定休日：土日祝祭日 営業時間：10時～18時 [仙台のホームページ制作会社]
トップページ → アンカーラボ → オープンソース - JavaScript:AutoStripe
(オープンソース) JavaScript: AutoStripe
テーブルの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
また、設置方法のアドバイスや設置代行作業(有料)も行っております。お気軽にお問い合せ下さい。
AutoStripeスクリプト仕様
- tdStripe(table_class_name, even_class_name, odd_class_name, mode)
- table要素のclass属性にtable_class_nameがセットされているtd要素に適用されます。
※対象の要素にclass属性が存在している場合はスキップします。
| パラメータ値 | デフォルト値 | 備考 |
|---|---|---|
| table_class_name | "" | 必須。ここで指定された属性値にのみtdStripeが適用されます。 |
| even_class_name | "" | 対象：td要素 偶数の場合に適用するclass属性値。 |
| odd_class_name | "" | 対象：td要素 奇数の場合に適用するclass属性値。 |
| mode | "row" | row：下に向かって行を対象とします。
col：右に向かって列を対象とします。 |
- trStripe(table_class_name, even_class_name, odd_class_name)
- table要素のclass属性にtable_class_nameがセットされているtr要素に適用されます。
| パラメータ値 | デフォルト値 | 備考 |
|---|---|---|
| table_class_name | "" | 必須。ここで指定された属性値にのみtdStripeが適用されます。 |
| even_class_name | "" | 対象：tr要素 偶数の場合に適用するclass属性値。 |
| odd_class_name | "" | 対象：tr要素 奇数の場合に適用するclass属性値。 |
- ulStripe(ul_class_name, even_class_name, odd_class_name)
- ul要素のclass属性にul_class_nameがセットされているli要素に適用されます。
| パラメータ値 | デフォルト値 | 備考 |
|---|---|---|
| ul_class_name | "" | 必須。ここで指定された属性値にのみulStripeが適用されます。 |
| even_class_name | "" | 対象：li要素 偶数の場合に適用するclass属性値。 |
| odd_class_name | "" | 対象：li要素 奇数の場合に適用するclass属性値。 |
- olStripe(ol_class_name, even_class_name, odd_class_name)
- ol要素のclass属性にol_class_nameがセットされているli要素に適用されます。
| パラメータ値 | デフォルト値 | 備考 |
|---|---|---|
| ol_class_name | "" | 必須。ここで指定された属性値にのみolStripeが適用されます。 |
| even_class_name | "" | 対象：li要素 偶数の場合に適用するclass属性値。 |
| odd_class_name | "" | 対象：li要素 奇数の場合に適用するclass属性値。 |
- dlStripe(dl_class_name, even_class_name, odd_class_name)
- dl要素のclass属性にdl_class_nameがセットされているdt/dd要素に適用されます。
| パラメータ値 | デフォルト値 | 備考 |
|---|---|---|
| dl_class_name | "" | 必須。ここで指定された属性値にのみdlStripeが適用されます。 |
| even_class_name | "" | 対象：dt/dd要素 偶数の場合に適用するclass属性値。 |
| odd_class_name | "" | 対象：dt/dd要素 奇数の場合に適用するclass属性値。 |
ご利用条件
- アンカーラボで公開している全ては、通常、商用利用をお断りしておりますが、オープンソースの表示がある場合はこの限りではありません。どなたでも自由にご利用が可能です。
※ホームページ制作会社(ホームページ制作関連の業者・デザイン会社含む)が自社のページに設置する場合に限り商用ページに設置が可能です - 弊社トップページへのリンクをして頂きます。設置箇所付近又は、設置ページのCopyright付近に目立たないよう小さくでも結構です。
<a href="http://www.anchor-gr.jp/" title="オープンソース アンカーラボ">Powered by アンカーグループ</a>
表示例）→ Powered by アンカーグループ - アクセス数があまりにも多い場合は、一時的に制限させて頂く場合がございます。
※常時負荷が大きい場合はご相談させて頂きます - 電源メンテナンス・セキュリティアップデート等でサーバを再起動する場合、一時的にアクセスが出来なくなる事があります。
※通常3分以内で完了します。長時間のダウンタイムが発生する場合のみ当ホームページで告知致します。
- ホームページ作成、WEB制作は
仙台市のアンカー！ 
- ホームページ制作、開発
- 仙台市内|名取|岩沼|白石
亘理|大河原|角田|仙南|仙北
宮城県内お伺い致します。
営業カレンダー
※赤文字は定休日です
| 2025年12月 | ||||||
|---|---|---|---|---|---|---|
| 日 | 月 | 火 | 水 | 木 | 金 | 土 |
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 | |||
| 2026年1月 | ||||||
| 日 | 月 | 火 | 水 | 木 | 金 | 土 |
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |