• かちびと.net

    少しのjQueryコードでHTMLテーブルの列にリンク先を指定できるようにする方法をご紹介。料金表などをテーブルで作成する際に使えるのでは。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

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

スポンサーリンク

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

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

動作サンプル

地名 読み方 En 詳細 その他
東京 とうきょう Tokyo 日本の事実上の首都がある ダミーリンク
京都 きょうと Kyoto 794年に日本の首都に定められた ダミーリンク
静岡 しずおか Shizuoka 静岡市と浜松市の2つの政令指定都市を有する ダミーリンク
大阪 おおさか Osaka 関西地区の経済・文化の中心地 ダミーリンク

列全体がクリック可能で、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コードで(ryをもう少し短くしてみたよ
もっと少量のjQueryコードでHTMLテーブルの列にリンク先を指定できるようにする方法

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

URL :
TRB :

Ads

Posts

Contact

Services