テーブルをセルごとにハイライト「tablecloth」
Javascript2008年2月11日
Tableclothの使い方
まずは下記のサイトよりデータをダウンロードします。
<head>～</head>内に Tableclothを呼び出すコードを記述します。
<script type="text/javascript" src="tablecloth/tablecloth.js"></script>
次にCSSを読み込むコードも<head>～</head>内に記載します。
<link href="tablecloth/tablecloth.css" rel="stylesheet" type="text/css" media="screen" />
とりあえずこれだけで機能します。
Tableclothの設定の仕方
| var highlightCols = true | 縦の行をハイライトさせるか否か設定。ハイライトさせたくない場合はtrueをfalseに書き換えます。 |
|---|---|
| var highlightRows = false | 横の行をハイライトさせるか否か設定。ハイライト表示させたい場合はfalseをtrueに書き換えます。 |
| var selectable = true; | 表内のセルをクリックすると濃いハイライト表示させるかどうか設定。初期設定は【true】。ハイライト表示させたくない場合は【true】を【false】に書き換える。 |
ハイライトの色などを変更したい場合はtablecloth.cssの色指定をするだけです。
書くと長いですが実際やってみるとあっという間だと思います。ユーザビリティ向上にぜひお役立てください。普通にメールフォームとかでも重宝します。
この記事を読んでいる方にオススメの記事
- Javascript第3回／Webアプリが作れるjsライブラリ「Sencha Touch」の使い方
- Javascript「iepngfix.js」を応用してPNG画像をIE6に完全対応させる方法
- JavascriptJavascriptの読み込みをひとつのファイルにまとめる「import.js」
- JavascriptPNG透過ライブラリにまつわる問題を全て解決したuupaa-suketrans.js
- JavascriptIE6以下をIE7と同じ解釈にするjavascript「IE7.js」
- JavascriptPNG対応JSの決定版「DD_belatedPNG」
- ※承認制のため、即時には反映されません。
この記事にコメントする