少しの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>