リンクのクリックエリアをテーブルの行に拡張「rowClick」
当ページのリンクには広告が含まれています。
スポンサーリンク
リンクのクリックエリアをテーブルの行に拡張する「rowClick」を紹介します。
jQueryプラグイン「rowClick」
このプラグインを使えば、テーブルのセルにリンクがある場合、そのリンクのクリックエリアをテーブルの行へ拡張することができます。
実装は、クリックエリアを拡張したいテーブル要素を指定するだけで、OKです。
スポンサーリンク
デモで動作を確認してみてください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>rowClick - jQueryプラグインまとめのカルマ</title>
<style>
table, td {
border-collapse: collapse;
border: 1px solid blue;
padding: 4px 7px;
}
.rowClick {
cursor: pointer;
}
</style>
</head>
<body>
<h1>rowClickのデモでーす。</h1>
<table id="expand">
<tbody>
<tr>
<td>ここをクリックしても「jQuery入門」へ！</td>
<td><a href="https://webkaru.net/jquery-plugin/introduction/">jQuery入門</a></td>
<td>ここをクリックしても「jQuery入門」へ！</td>
</tr>
<tr>
<td>この行はリンクがないので</td>
<td>どこにも</td>
<td>ジャンプしません。</td>
</tr>
</tbody>
</table>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="jquery.rowClick.1.0.js"></script>
<script>
$(document).ready(function(){
$('#expand').rowClick();
});
</script>
</body>
</html>
スポンサーリンク