HTML
<h1>テーブルの1行リンク</h1>
<table class="table table-hover" id="table">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">名前</th>
<th scope="col">年齢</th>
<th scope="col">編集</th>
<th scope="col">プレビュー</th>
</tr>
</thead>
<tbody>
<tr data-href="https://github.com/">
<th scope="row">1</th>
<td>山田太郎</td>
<td>20</td>
<td>
<button type="button" class="btn btn-outline-warning no_link" onclick="location.href='https://qiita.com/'">
<span class="material-icons">edit</span>
編集
</button>
<td>
<span class="material-icons no_link" type="button" class="btn btn-lg btn-info" data-bs-toggle="popover"
title="title" data-bs-content="content">info</span>
</td>
</tr>
</tbody>
</table>
<script>
jQuery(function ($) {
$('tr[data-href]').addClass('clickable')
.click(function (e) {
//対象の要素以外であれば、data-hrefのURLに遷移する
if (!$(e.target).is('a') && $(e.target).closest('.no_link').length == 0) {
console.log('aとnot_link以外');
const url = $(e.target).closest('tr').data('href');
window.open(url, '_blank')
}
});
});
</script>
説明
・テーブルの1行をクリックするとリンク
・編集ボタンは別リンク
・プレビューのアイコンはポップバー(リンクではない)