firstAudience

simahebi.js - テーブルをシマシマにして見やすく。

simahebi.gif

» Ver.1.0 Download


特長

  • 特定のテーブルが自動的にシマシマになるスクリプトです。
    jsファイルにリンクして、tbodyタグにid（もしくはclass）を追加するだけで、表組がシマシマになります。
  • 色や背景画像などデザインは自由にカスタマイズできます。
  • 同一ページ内で複数のデザインを利用することもできます。
  • IE5.5〜IE7, Firefox, Opera, Safari（OSX10.3以上）に対応。
  • 利用許諾：クリエイティブ・コモンズ - シェアアライク 2.1

Demo

１行置きに自動的にスタイルを適用。
０番行
奇数番行
偶数番行
奇数番行
偶数番行
奇数番行
偶数番行
奇数番行
偶数番行
同一ページ内で複数のデザインテーマが使えます。
０番行
奇数番行
偶数番行
奇数番行
偶数番行
奇数番行
偶数番行
奇数番行
偶数番行

利用方法

サンプルファイル

  1. 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部分をカスタマイズします。
基本 ["指定","指定",・・・] となっているカンマで区切られた " " 内を編集していきます。記述順で縦に組となっているので、設定の数と順番が一致するよう注意してください。

  1. var section_label = ["Aの設定","Bの設定",•••];
  2. var tr_style = ["Aの設定","Bの設定",•••];
  3. var th_style = ["Aの設定","Bの設定",•••];
  4. var td_style = ["Aの設定","Bの設定",•••];
解説

A, B ２つのデザインテーマを定義した場合の例です。

  1. var section_label = ["#A_sima_sec","#B_sima_sec"];
    html上でtbodyに付与したid名（またはclass名）を記述します。CSSセレクタの記述と同じように、idの場合は#、classの場合は . を先頭に置いてください。

  2. var tr_style = ["",""];
    var th_style = ["",""];
    var td_style = ["background: #ccccff;","background: #ffffcc;"];
    行のデザインをCSSで記述します。
    trのスタイル
    thのスタイル
    tdのスタイル
    を指定することが出来ます。
    例ではtdだけに設定を行っています。

以上

お気づきの点はこちらまで
Eメール: info@firstaudience.com