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>
<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>
<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
}
cursor:pointer;
}
tr:hover {
color:#dd0000;
background:#ccc
}
bootstrap3のDataTablesを併用すると、きれいなデザインになります。