今日の人気記事

  1. レスポンシブなメニューを作成「MeanMenu」
  2. テーブルやリストから文字列を検索「QuickSearch」
  3. 指定した要素を更新(変更)する「Refreshing an element at a set time interval」
  4. アニメ効果付きの円グラフを作成「Circliful」
  5. カウントダウン作成「Countdown」マルチ言語対応

リンクのクリックエリアをテーブルの行に拡張「rowClick」

スポンサーリンク

リンクのクリックエリアをテーブルの行に拡張する「rowClick」を紹介します。

jQueryプラグイン「rowClick」

このプラグインを使えば、テーブルのセルにリンクがある場合、そのリンクのクリックエリアをテーブルの行へ拡張することができます。

実装は、クリックエリアを拡張したいテーブル要素を指定するだけで、OKです。

スポンサーリンク

デモで動作を確認してみてください。

「rowClick」のデモ

デモのソース(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>
スポンサーリンク

関連記事(一部広告含む)