デコレーションテーブル.js

いくつかの都道府県の面積や人口を示す表があります。この表では1行おき、その背景色が変えられており、とても見やすくなっています。各行の左側にはチェックボックスがあります。ひとつの都道府県だけチェックが入っており、その行は、その他の行と比べて、背景が濃くなって、選択されたことが見やすくなっています。

デコレーションテーブル.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つ以上のチェックボックスがある場合、最初に現れるチェックボックスのみがマウスクリックに連動します。
デコレーションテーブル.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

上のテーブルのtableタグのclass属性に html5jp-tbldeco を追加します。

<table class="sample-tbl html5jp-tbldeco">

以上で準備完了です。

結果

デコレーションテーブル.jsを適用したテーブルは、以下のようになります。

デコレーションテーブル.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-2012 HTML5.JP

当サイトのJavaScriptライブラリは、Apache License, Version 2.0 のもとに配布します。