【jQuery】テーブルの行全体をリンクにする方法(サンプルコード記載)

jQuery

jQueryを利用して、テーブルの行全体をリンクにする方法です。
最近はスマートフォン表示も気にかけることが多いので、便利です。
jQueryのファイルと同じ場所にjavascriptを設置します。

javascript

<script src=”./jquery.min.js”></script>
<script>
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’);
});
});
});
</script>

下記の、「URL」のところにリンク先を指定します。

html

<table>
<tbody>
<tr data-href=”URL”>
<th>DATA1</th>
<th>DATA2</th>
<th>DATA…</th>
</tr>
</tbody>
</table>

行全体がリンクと分かるよう、「cursor:pointer」を指定。
「hover」で、マウスがのった時の文字色や背景色を指定。

CSS(デザイン補正)

tr  {
cursor:pointer;
}
tr:hover {
color:#dd0000;
background:#ccc
}

bootstrap3のDataTablesを併用すると、きれいなデザインになります。

 

タイトルとURLをコピーしました