管理画面などを実装しているとき、一覧画面では<table>タグでデータを表示することが多いと思います。また、顧客側から、行のどこをクリックしても詳細画面や編集画面にジャンプするような行を実装したいという要望が出ることもあります。
今日はそのシンプルな方法をご紹介します。
目次
以下のように、<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>jQueryを使うと簡単ですが、React.jsやVue.jsなどの出現もあって、jQueryを使わない開発も増えてきていると思うので、jQueryとVanilla JSの2種類の記述例を書いておきます。
$(function(){
$('tr[data-href]').on('click', function(){
location.href = $(this).data('href');
});
});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;
}
}このままだと、カーソルが矢印のままで、UI的にクリックできることがわかりにくいので、カーソルも変えておきましょう。
tr[data-href]{
cursor: pointer;
}便利なものはclassやdata属性を与えるだけで、簡単に使えるようにまとめておくと開発効率が上がります。