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

■動作サンプル1

mouseon時に背景色を変更する

1列目のリンクを該当の行全てに適用

列1	列2	列3	列4
サンプルリンク	サンプルサンプル	サンプルサンプルサンプル	samplesample
サンプルリンク	サンプルサンプル	サンプルサンプルサンプル	samplesample
サンプルリンク	サンプルサンプル	サンプルサンプルサンプル	samplesample
サンプルリンク	サンプルサンプル	サンプルサンプルサンプル	samplesample

mouseon時に背景色を変更する

1列目のリンクを該当の行の列1～3に適用

列1	列2	列3	列4
サンプルリンク	サンプルサンプル	サンプルサンプルサンプル	サンプルリンク2
サンプルリンク	サンプルサンプル	サンプルサンプルサンプル	サンプルリンク2
サンプルリンク	サンプルサンプル	サンプルサンプルサンプル	サンプルリンク2
サンプルリンク	サンプルサンプル	サンプルサンプルサンプル	サンプルリンク2

mouseon時に背景色を変更しない

1列目のリンクを該当の行の列1～3に適用

列1	列2	列3	列4
サンプルリンク	サンプルサンプル	サンプルサンプルサンプル	サンプルリンク2
サンプルリンク	サンプルサンプル	サンプルサンプルサンプル	サンプルリンク2
サンプルリンク	サンプルサンプル	サンプルサンプルサンプル	サンプルリンク2
サンプルリンク	サンプルサンプル	サンプルサンプルサンプル	サンプルリンク2

■使い方

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

<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]">

最後に、列リンクにしたい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時の背景色
	}
},