Tigra Tables の table.js で背景色の変わるテーブルを作る
http://www.softcomplex.com/products/tigra_tables/demo.html の Tigra Tables を使ってマウスが乗ると背景色が変化するテーブルを作る方法です。上記のサイトでダウンロードした tigra_tables.zip を展開すると tigra_tables というディレクトリが作成されて、中に tigra_tables.js がありますので、これを html の head 部分に <script src="../tigra_tables.js" type="text/javascript></script> などとというような感じで記述しておきます。もちろん tigra_tables.js のある場所は適格変更します。後は、下のサンプルをご覧ください。
demo : 下のテーブルは tigra_tables のDemo です。
| Tigra Tables Compatibility List | |||
|---|---|---|---|
| Compatible | Uncompatible (causes no problems) | ||
| Browser | Ver. | Browser | Ver. |
| Microsoft Internet Explorer | 4.0 | Netscape Communicator | 4.7 |
| Microsoft Internet Explorer | 5.0 | Netscape Communicator | 4.51 |
| Microsoft Internet Explorer | 5.5 | Netscape | 6.0 |
| Microsoft Internet Explorer | 6.0 | Opera | 5.02 |
このテーブルのソースは以下のようになります。
ソースコードの下のほうに JavaScript の部分がありますが、これがこのテーブルの設定になります。
<table id="demo_table" cellpadding="3" cellspacing="0" border="1" width="80%" align="center">
<tr>
<th colspan="4">Tigra Tables Compatibility List</th>
</tr>
<tr>
<th colspan="2" width="50%">Compatible</th>
<th colspan="2">Uncompatible (causes no problems)</th>
</tr>
<tr>
<th>Browser</th><th>Ver.</th><th>Browser</th>
<th>Ver.</th>
</tr>
<tr>
<td>Microsoft Internet Explorer</td>
<td>4.0</td><td>Netscape Communicator</td>
<td>4.7</td>
</tr>
<tr>
<td>Microsoft Internet Explorer</td>
<td>5.0</td>
<td>Netscape Communicator</td>
<td>4.51</td>
</tr>
<tr>
<td>Microsoft Internet Explorer</td>
<td>5.5</td>
<td>Netscape</td>
<td>6.0</td>
</tr>
<tr>
<td>Microsoft Internet Explorer</td>
<td>6.0</td>
<td>Opera</td>
<td>5.02</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<script language="JavaScript">
<!--
tigra_tables('demo_table', 3, 1, '#ffffff', '#ffffcc', '#ffcc66', '#cccccc');
// -->
</script>
JavaScript の tigra_tables('demo_table', 3, 1, '#ffffff', '#ffffcc', '#ffcc66', '#cccccc') の部分を説明します。
tigra_tables はこの JavaScript のファイル名です。カッコの中の demo_table は テーブルのところで設定した id 名です。これは適時他のものに変更可能。
JavaScript のカッコの中の 3, 1, という数字は背景色をつける行の始まりと終りを指示しています。一番上の Tigra Tables Compatibility List と書かれている行はタイトルなので数えません。
'#ffffff', '#ffffcc' は１行おきの背景色であり、#ffcc66 という色はマウスが乗ったときに変化する色であり、#cccccc はクリックしたときの色を指定しています。
もちろんどの設定も変更可能です。
下のテーブルは tigra_tables をアレンジしてみたものです。
| ここへ表のタイトルなど | |
|---|---|
| 1行目の１列目 | １行目の２列目 |
| ２行目の１列目 | ２行目の２列目 |
| ３行目の１列目 | ３行目の２列目 |
| ４行目の１列目 | ４行目の２列目 |
| ５行目の１列目 | ５行目の２列目 |
| ６行目の１列目 | ６行目の２列目 |
| ７行目の１列目 | ７行目の２列目 |
| ８行目の１列目 | ８行目の２列目 |
| ９行目の１列目 | ９行目の２列目 |
| １０行目の１列目 | １０行目の２列目 |
| № | 名 前 | 居住地 | 電話番号 | 備考 |
|---|---|---|---|---|
| 01 | ||||
| 02 | ||||
| 03 | ||||
| 04 | ||||
| 05 | ||||
| 06 | ||||
| 07 | ||||
| 08 | ||||
| 09 | ||||
| 10 |
| № | 名 前 | 居住地 | 電話番号 | 備考 |
|---|---|---|---|---|
| 01 | ||||
| 02 | ||||
| 03 | ||||
| 04 | ||||
| 05 | ||||
| 06 | ||||
| 07 | ||||
| 08 | ||||
| 09 | ||||
| 10 |