少しのjQueryコードでHTMLテーブルの列にリンク先を指定できるようにする

シンプルでいいアイデアだったのでメモ。
HTMLテーブルの列そのものにリンクを
指定できるようにする、というもの。jQuery
でサクッと出来るようですね。ちょっと思
いつきませんでしたけど・・テーブルまわり
は使いやすさを向上したいところです。

HTMLのテーブルの列をjQueryでクリッカブルにする事で、ユーザーの利便性を上げられそうです。

動作サンプル

列全体がクリック可能で、Wikipediaに飛びます。セル内にアンカータグが含まれている場合はそちらが優先されます。Webサービスの料金プランなんかに使えそうでは。

コード

jQuery( function($) {
			$('tbody tr[data-href]').addClass('clickable').click( function() {
				window.location = $(this).attr('data-href');
			}).find('a').hover( function() {
				$(this).parents('tr').unbind('click');
			}, function() {
				$(this).parents('tr').click( function() {
					window.location = $(this).attr('data-href');
				});
			});
		});

列のどこにいてもクリック出来るようにする。tr要素には予めdata-href=”http://example.com”というマークアップをしてあります。

マークアップ

<table> 
				<thead> 
					<tr> 
						<th>地名</th> 
						<th>読み方</th> 
						<th>En</th> 
						<th>詳細</th> 
						<th>その他</th> 
					</tr> 
				</thead> 
				<tbody> 
					<tr data-href="http://ja.wikipedia.org/wiki/%E6%9D%B1%E4%BA%AC"> 
						<td>東京</td> 
						<td>とうきょう</td> 
						<td>Tokyo</td> 
						<td>日本の事実上の首都がある</td> 
						<td><a href="#">ダミーリンク</a></td> 
					</tr> 
					<tr class="even" data-href="http://ja.wikipedia.org/wiki/%E4%BA%AC%E9%83%BD"> 
						<td>京都</td> 
						<td>きょうと</td> 
						<td>Kyoto</td> 
						<td>794年に日本の首都に定められた</td> 
						<td><a href="#">ダミーリンク</a></td> 
					</tr> 
					<tr data-href="http://ja.wikipedia.org/wiki/%E9%9D%99%E5%B2%A1%E7%9C%8C"> 
						<td>静岡</td> 
						<td>しずおか</td> 
						<td>Shizuoka</td> 
						<td>静岡市と浜松市の2つの政令指定都市を有する</td> 
						<td><a href="#">ダミーリンク</a></td> 
					</tr> 
					<tr class="even" data-href="http://ja.wikipedia.org/wiki/%E5%A4%A7%E9%98%AA"> 
						<td>大阪</td> 
						<td>おおさか</td> 
						<td>Osaka</td> 
						<td>関西地区の経済・文化の中心地</td> 
						<td><a href="#">ダミーリンク</a></td> 
					</tr> 
				</tbody> 
			</table>

上記サンプルのソースです。

なかなか手軽でいい感じですね。ユーザーにも優しいし、使いこなしたいです。以下を参考にしました。

via:The Phuse

【追記】
もっとシンプルなコードにしてくれますた。ﾜｰｲ（´▽｀）
少しのjQueryコードで（ｒｙをもう少し短くしてみたよ
もっと少量のjQueryコードでHTMLテーブルの列にリンク先を指定できるようにする方法

こうしてより良い方法に改善してくれるのは凄く嬉しいですねｗ