デコレーションテーブル.js
デコレーションテーブル.jsは、class属性に値を追加するだけで、テーブルの通常行の背景色をストライプ状にし、各行をクリッカブルにするライトウェイトなライブラリーです。他のJavaScriptライブラリに依存せず、単独で動作します。
テーブルをデコレーションするJavaScriptライブラリは海外物も含めて数多くありますので、このライブラリは特に目新しさはなく機能も少ないのですが、よろしければ是非ご利用ください。
ダウンロード
| Release | Date | Size (byte) | Download |
|---|---|---|---|
| 1.0.1 | 2008-08-28 | 14,981 | deco_table_1_0_1.zip |
使い方
deco_table_x_x_x.zipを解凍し、html5jpフォルダをウェブサーバにそのままアップロードしてください。そしてHTMLのhead要素内に、次のJavaScriptコードを記述してください。
<script type="text/javascript" src="../html5jp/deco/table.js"></script>
下のように通常のテーブルを用意します。スタイルシートでお好みのデザインにデコレーションしておきます。テーブルを用意する際には以下の点に注意してください。
- ヘッダー行は thead タグで囲み、通常行は tbody タグで囲んでください。もしヘッダー行がないテーブルであれば、tbodyも必要ありません。
- スタイルシートで td および th 要素の背景色（background-colorプロパティ）を指定しておいてください。もし背景色が指定されていない場合は background-color プロパティに #ffffff（白）が指定されているものとして処理されます。
- チェックボックスは必須ではありません。ただし、同じ行に2つ以上のチェックボックスがある場合、最初に現れるチェックボックスのみがマウスクリックに連動します。
| 都道府県 | 面積(km2) | 人口(人) | コード | |
| ※ 人口は2005年国勢調査の結果に基づく。 | ||||
| 東京 | 2187.42 | 1257万0904 | 13 | |
| 神奈川 | 2415.84 | 879万0900 | 14 | |
| 千葉県 | 5156.58 | 605万6159 | 12 | |
| 埼玉県 | 3797.25 | 705万3689 | 11 | |
| 愛知県 | 5677.38 | 725万4432 | 23 | |
| 大阪府 | 1896.83 | 881万7010 | 27 | |
上のテーブルのtableタグのclass属性に html5jp-tbldeco を追加します。
<table class="sample-tbl html5jp-tbldeco">
以上で準備完了です。
結果
デコレーションテーブル.jsを適用したテーブルは、以下のようになります。
| 都道府県 | 面積(km2) | 人口(人) | コード | |
| ※ 人口は2005年国勢調査の結果に基づく。 | ||||
| 東京 | 2187.42 | 1257万0904 | 13 | |
| 神奈川 | 2415.84 | 879万0900 | 14 | |
| 千葉県 | 5156.58 | 605万6159 | 12 | |
| 埼玉県 | 3797.25 | 705万3689 | 11 | |
| 愛知県 | 5677.38 | 725万4432 | 23 | |
| 大阪府 | 1896.83 | 881万7010 | 27 | |
デコレーションテーブル.jsでは、以下の操作を行います。
- テーブルの通常行の背景色を自動的に認識し、1行おきに背景色の濃淡を調整してストライプ状にします。実際には、セル（td および th 要素）ごとに背景色を認識して濃淡を個別に調整します。
- マウスポインタの位置にあわせて行をハイライトします。
- 行をクリックするとハイライトが固定され、チェックボックスにチェックが入ります。
バージョンアップ履歴
2008-08-28 ver 1.0.0 → ver 1.0.1
- テーブルの行内の最初にチェックボックスが存在しないとエラーとなってしまう不具合を改修した。
2008-08-27
- ver 1.0.0 リリース
著作権・謝辞
著作権
Copyright 2007-2009 HTML5.JP
当サイトのJavaScriptライブラリは、Apache License, Version 2.0 のもとに配布します。