• RSS

[JS]jQuery を利用して <table> の <tr> にリンク先を指定できるようにする方法

  • このエントリーをはてなブックマークに追加
  • follow us in feedly


この記事は かちびと.net 様の記事を参考にさせていただきました。

<table> の行をクリックして、指定したリンク先に飛ばせるようにする方法です。

非常に便利なカスタマイズでしたのでシェアさせていただきました。

jQuery ファイルと一緒にjavascript のコードを設置

かちびと.net 様で公開されているソースコードを、jquery ファイルと一緒に設置します。
<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>


<table> の <tr> にリンク先を指定

<tr> の行をクリックすることで、data-href= で指定したリンク先
(以下に例であれば http://www.webantena.net/)に飛ばします。
<table>
<tbody>
<tr data-href="http://www.webantena.net/">
<th>項目1</th>
<th>項目2</th>
<th>項目3</th>
<th>項目4</th>
</tr>
</tbody>
</table>


CSS でデザインを補正

マウスで行がクリックできると分かるように、cursor:pointer を指定します。
また、デザインにもよりますが tr:hover で背景色や文字色を変えても良いかもしれません。
tr		{
cursor:pointer;
}
tr:hover	{
color:#dd0000;
background:#ccc
}
以下に簡単なサンプルを用意しました。
<table> の行をクリックするデモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す