test

■動作サンプル

奇数行・偶数行で背景色を変える

オプション：stripe

列1	列2	列3	列4
サンプル	サンプルサンプル	サンプルサンプルサンプル	sample
サンプル	サンプルサンプル	サンプルサンプルサンプル	sample
サンプル	サンプルサンプル	サンプルサンプルサンプル	sample
サンプル	サンプルサンプル	サンプルサンプルサンプル	sample

hover時に行の背景色を変える

オプション：hover

列1	列2	列3	列4
サンプル	サンプルサンプル	サンプルサンプルサンプル	sample
サンプル	サンプルサンプル	サンプルサンプルサンプル	sample

hover時に行の文字サイズを拡大する

オプション：autoZoom

列1	列2	列3	列4
サンプル	サンプルサンプル	サンプルサンプルサンプル	sample
サンプル	サンプルサンプル	サンプルサンプルサンプル	sample

input,select,textarea要素にフォーカス時に行の背景色を変える

オプション：active

列1	列2	列3	列4
	サンプルサンプル	サンプルサンプルサンプル	sample
サンプル	sample1 sample2	サンプルサンプルサンプル	sample
サンプル	サンプルサンプル		sample
サンプル	サンプルサンプル	サンプルサンプルサンプル	sample

input,select,textarea要素にフォーカス時に行の文字サイズを拡大する

オプション：focusZoom

列1	列2	列3	列4
	サンプルサンプル	サンプルサンプルサンプル	sample
サンプル	sample1 sample2	サンプルサンプルサンプル	sample
サンプル	サンプルサンプル		sample
サンプル	サンプルサンプル	サンプルサンプルサンプル	sample

テキストボックスに文字が入力された行の背景色を変更する

オプション：entered

列1	列2	列3	列4
	サンプルサンプル	サンプルサンプルサンプル	sample
	サンプルサンプル	サンプルサンプルサンプル	sample

チェックボックスがチェックされた行の背景色を変更する

オプション：checked

列1	列2	列3	列4
sample	サンプルサンプル	サンプルサンプルサンプル	sample
sample	サンプルサンプル	サンプルサンプルサンプル	sample

装飾の複数指定1

オプション：stripe,hover,autoZoom,checked,pointer

列1	列2	列3	列4
sample	サンプルサンプル	サンプルサンプルサンプル	sample
sample	サンプルサンプル	サンプルサンプルサンプル	sample

装飾の複数指定2

オプション：hover,focusZoom,active

行1
行2
行3	sample1 sample2

■使い方

外部ファイルとして読み込む

<script type="text/javascript" src="js/tableDecorateExtension.js"></script>

本JSを適用したいtable要素のクラス属性に"decorate"を指定し、
付加したい装飾のオプション名を"["と"]"で囲んで指定する。（オプション名は動作サンプルを参照）

<table class="decorate[stripe]">
～
</table>

付加したい装飾が複数ある場合は、カンマ区切りでオプション名を指定する。

<table class="decorate[hover,focusZoom,active]">
～
</table>

■javascriptの設定

jsファイル内の13～26行目付近にある設定値を変更することで、背景色や文字サイズなどをサイトに合わせることができる。

//-----------------------------------------
// 設定値
//-----------------------------------------
conf : {
	targetClass : 'decorate',
	oddColor : '#fff', // オプション[stripe]時の奇数行の背景色
	evenColor : '#f8f8ff', // オプション[stripe]時の偶数行の背景色
	hoverColor : '#ecf0e7', // オプション[hover]時の背景色
	activeColor : '#fff5ee', // オプション[active]時の背景色
	enteredColor : '#fff5ee', // オプション[entered]時の背景色
	checkedColor : '#fff5ee', // オプション[checked]時の背景色
	autoZoomSize : '120%', // オプション[autoZoom]時の文字サイズ
	focusZoomSize : '140%' // オプション[focusZoom]時の文字サイズ
},

テスト - テーブルを装飾する

■動作サンプル

■使い方

■javascriptの設定