オープンソース JavaScript:AutoStripeを公開


 トップページ → アンカーラボ → オープンソース - 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
TD10TD20TD30TD40TD50
TD11TD21TD31TD41TD51
TD12TD22TD32TD42TD52
TD13TD23TD33TD43TD53
TD14TD24TD34TD44TD54
  • 設定
    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属性値。

ご利用条件

  1. アンカーラボで公開している全ては、通常、商用利用をお断りしておりますが、オープンソースの表示がある場合はこの限りではありません。どなたでも自由にご利用が可能です。
    ※ホームページ制作会社(ホームページ制作関連の業者・デザイン会社含む)が自社のページに設置する場合に限り商用ページに設置が可能です
  2. 弊社トップページへのリンクをして頂きます。設置箇所付近又は、設置ページのCopyright付近に目立たないよう小さくでも結構です。
    <a href="http://www.anchor-gr.jp/" title="オープンソース アンカーラボ">Powered by アンカーグループ</a>
    表示例)→ Powered by アンカーグループ
  3. アクセス数があまりにも多い場合は、一時的に制限させて頂く場合がございます。
    ※常時負荷が大きい場合はご相談させて頂きます
  4. 電源メンテナンス・セキュリティアップデート等でサーバを再起動する場合、一時的にアクセスが出来なくなる事があります。
    ※通常3分以内で完了します。長時間のダウンタイムが発生する場合のみ当ホームページで告知致します。
  • 仙台のホームページ制作・WEBシステム開発会社
  • 仙台でホームページ制作なら022-342-1556
  • ホームページ作成、WEB制作は
    仙台市のアンカー!
  • お問合せフォーム
  • EVSSL
  • 無料お見積フォーム
  • ホームページ制作、開発
  • 仙台市内|名取|岩沼|白石
    亘理|大河原|角田|仙南|仙北
    宮城県内お伺い致します。

営業カレンダー

※赤文字は定休日です

2024年3月
12
3456789
10111213141516
17181920212223
24252627282930
31
2024年4月
123456
78910111213
14151617181920
21222324252627
282930