[JavaScript] td要素内のリンクを行（tr要素）リンクにする

たいぶ前に作ったものですが、まだこちらで公開していなかったようなのでアップします。

table要素を使用して一覧表などをマークアップする際に、
行全体をリンクにした方が使い易い場合がありますが、そのような時に使用するライブラリです。

使い方

ファイルの読み込み

外部ファイルとして読み込みます。

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

クラスの指定①

本JSを適用したい table要素のクラスに"rowLink"を指定し、
リンクにしたい列番号（※1列目=0、2列目=1...としてカウント）と、hover時に背景色を変えたい場合は"hover"を、"["と"]"で囲んで指定してください。

<table class="rowLink[0,1,2,hover]">

少し分かり辛いですね...すいません^^;
詳細は DEMO のソースを見て頂ければと思います。

クラスの指定②

次に、列リンクにしたい a要素のクラスに"rowLinkTarget"を指定してください。
"rowLinkTarget"はひとつの tr要素内にひとつだけ指定可能です。

<td><a class="rowLinkTarget" href="#">サンプルリンク</a></td>

JavaScriptの設定

jsファイル内の11～20行目付近にある設定値を変更することで、hover時の背景色やクラス名などをサイトに合わせて変更できます。

//-----------------------------------------
// 設定値
//-----------------------------------------
config : {
	targetClass : 'rowLink',
	linkTargetClass : 'rowLinkTarget',
	color : {
		hover : '#ecf0e7' // hover時の背景色
	}
},

トラックバックURL

http://mashimonator.weblike.jp/mt/mt-tb.cgi/196