特長
- 特定のテーブルが自動的にシマシマになるスクリプトです。
jsファイルにリンクして、tbodyタグにid（もしくはclass）を追加するだけで、表組がシマシマになります。 - 色や背景画像などデザインは自由にカスタマイズできます。
- 同一ページ内で複数のデザインを利用することもできます。
- IE5.5〜IE7, Firefox, Opera, Safari（OSX10.3以上）に対応。
- 利用許諾：クリエイティブ・コモンズ - シェアアライク 2.1
Demo
１行置きに自動的にスタイルを適用。
| ０番行 |
| 奇数番行 |
| 偶数番行 |
| 奇数番行 |
| 偶数番行 |
| 奇数番行 |
| 偶数番行 |
| 奇数番行 |
| 偶数番行 |
同一ページ内で複数のデザインテーマが使えます。
| ０番行 |
| 奇数番行 |
| 偶数番行 |
| 奇数番行 |
| 偶数番行 |
| 奇数番行 |
| 偶数番行 |
| 奇数番行 |
| 偶数番行 |
利用方法
サンプルファイル
- simahebi.js » Download
htmlの編集
ダウンロードしたsimahebi.jsとhtmlファイルをリンクします。
htmlの<head>〜<head>領域内などに以下の行を追加してください。
$設置先のパス$はsimahebi.jsの置き場所に合わせて編集します。
シマシマにするtable
tr行を下記のようにtbody要素で囲んでください。tbody要素には任意のid（またはclass）を付けてください。（このidはSimahebi.jsから参照されます。）
<table>
<tbody id="A_sima_sec">
<tr><td>０番行</td></tr>
<tr><td>奇数番行</td></tr>
<tr><td>偶数番行</td></tr>
<tr><td>奇数番行</td></tr>
<tr><td>偶数番行</td></tr>
<tr><td>奇数番行</td></tr>
<tr><td>偶数番行</td></tr>
<tr><td>奇数番行</td></tr>
<tr><td>偶数番行</td></tr>
</tbody>
</table>
<table>
<tbody id="B_sima_sec">
<tr><td>０番行</td></tr>
<tr><td>奇数番行</td></tr>
<tr><td>偶数番行</td></tr>
<tr><td>奇数番行</td></tr>
<tr><td>偶数番行</td></tr>
<tr><td>奇数番行</td></tr>
<tr><td>偶数番行</td></tr>
<tr><td>奇数番行</td></tr>
<tr><td>偶数番行</td></tr>
</tbody>
</table>
simahebi.js の編集
８行目あたりからはじまるuser setting部分をカスタマイズします。
基本 ["指定","指定",・・・] となっているカンマで区切られた " " 内を編集していきます。記述順で縦に組となっているので、設定の数と順番が一致するよう注意してください。
- var section_label = ["Aの設定","Bの設定",•••];
- var tr_style = ["Aの設定","Bの設定",•••];
- var th_style = ["Aの設定","Bの設定",•••];
- var td_style = ["Aの設定","Bの設定",•••];
解説
A, B ２つのデザインテーマを定義した場合の例です。
-
var section_label = ["#A_sima_sec","#B_sima_sec"];
html上でtbodyに付与したid名（またはclass名）を記述します。CSSセレクタの記述と同じように、idの場合は#、classの場合は . を先頭に置いてください。 -
var tr_style = ["",""];
var th_style = ["",""];
var td_style = ["background: #ccccff;","background: #ffffcc;"];
行のデザインをCSSで記述します。
trのスタイル
thのスタイル
tdのスタイル
を指定することが出来ます。
例ではtdだけに設定を行っています。
以上
お気づきの点はこちらまで
Eメール: info@firstaudience.com
