行をクリックしたとき画面遷移する<table>シンプルな実装【初心者向け】

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

今日はそのシンプルな方法をご紹介します。

HTML

以下のように、<tr>data-href属性を付与して、リンク先を記載します。

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

JS

jQueryを使うと簡単ですが、React.jsやVue.jsなどの出現もあって、jQueryを使わない開発も増えてきていると思うので、jQueryとVanilla JSの2種類の記述例を書いておきます。

jQuery

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

Vanilla JS

const tr = document.querySelectorAll('tr[data-href]');
tr.forEach(function(el) {
  el.onclick = function(e) {
    const clickedElement = e.target;
    const href = clickedElement.dataset.href;
    location.href = href;
  }
}

CSS

このままだと、カーソルが矢印のままで、UI的にクリックできることがわかりにくいので、カーソルも変えておきましょう。

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

まとめ

便利なものはclassやdata属性を与えるだけで、簡単に使えるようにまとめておくと開発効率が上がります。