経緯

管理画面などを実装しているとき、一覧画面ではテーブルでデータを表示することが多いと思います。
行のどこをクリックしても詳細画面や編集画面にジャンプするような行を実装したいという要望が出ることもあります。

今日はそのシンプルな方法

やり方

jQuery前提で話します。

HTMLは以下のようなもの。

<table class="table-clickable">
  <thead>
    <tr data-href="http://example.com/" >
      <th>名前</th>
      <th>メールアドレス</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>南部 晃史</td>
      <td>nambu.akifumi@example.com</td>
    </tr>
  </tbody>
</table>

このとき、以下の様なJavaScriptを実装するといい感じです。

$(function(){
  $('tr[data-href]', 'table.table-clickable').on('click', function(){
    location.href = $(this).data('href');
  });
});

ついでにリンクっぽく見せるために、カーソルも変えておきましょう。

table.table-clickable tr[data-href]{
  cursor: pointer;
}

CoffeeScriptの場合

$ ->
  $('tr[data-href]', 'table.table-clickable').on 'click', ->
    location.href = $(@).data('href')

やっぱり、CoffeeScriptのほうが見た目は簡単。

まとめ

便利なものは簡単に使えるようにまとめておいてあげると開発効率がぐーんと上がります。
そういったものはどんどんアーカイブ化していきましょう。