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

jQuery

2013.05.23

<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>

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=で指定したリンク先
（以下に例であれば https://webantena.net/）に飛ばします。

<table>
    <tbody>
        <tr data-href="https://webantena.net/">
            <th>項目1</th>
            <th>項目2</th>
            <th>項目3</th>
            <th>項目4</th>
        </tr>
    </tbody>
</table>

<table>

<tbody>

</tr>

</tbody>

</table>

CSS でデザインを補正

マウスで行がクリックできると分かるように、cursor:pointer を指定します。
また、デザインにもよりますが tr:hover で背景色や文字色を変えても良いかもしれません。

tr	{
	cursor:pointer;
}

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

tr {

cursor:pointer;

}

tr:hover {

color:#dd0000;

background:#ccc

}

以下に簡単なサンプルを用意しました。

<table> の行をクリックするデモ

参考ページ
少しのjQueryコードでHTMLテーブルの列にリンク先を指定できるようにする