カーソルを合わせると行・列を色付き表示できる - tableHoverプラグイン
tableHoverプラグインは指定したテーブルにカーソルを合わせると、カーソル上のセルがある行と列を色付きで表示でき、どこの行・列にあるかが分かりやすくなるプラグインです。
tableHoverプラグインを使ったサンプルの実行例
tableHoverプラグイン適用後を図7・図8に示します。図7はカーソルをNo.3の行、Bの列に合わせて行・列が青く表示されたところです。
図8はNo.2の行、Aの列にカーソルを合わせてクリックしたところです。クリックしたセルの行・列が赤く表示されています。
tableHoverプラグインの使い方
使用方法はtableHoverのサイト上から「jquery.tablehover.zip」をダウンロードし、解凍後「jquery.tablehover.js」をpluginsフォルダ下に配置します。
リスト4にtableHoverプラグインの使用例を示します。
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>jQueryプラグイン（tableHover) サンプル</title>
<!--1.jQueryの読み込み-->
<script type="text/javascript" src="./scripts/jquery-1.7.2.min.js"></script>
<!--2.プラグインの読み込み-->
<script type="text/javascript" src="./plugins/jquery.tablehover.js"></script>
<!--3.プラグインの設定-->
<script type="text/javascript">
$(document).ready(function(){
$('#book1').tableHover({
colClass: 'hover',
cellClass: 'hovercell',
clickClass: 'click'
});
});
</script>
<!--4.CSSの設定-->
<style type="text/css">
table{background-color: #DCDCDC;}
thead{background-color: #bbb;}
td{background:#FFF;text-align:center;}
td.hover, tr.hover{background-color: blue;}
td.click, th.click{background-color: red;}
</style>
</head>
<body>
<h1>jQueryプラグイン（tableHover) サンプル</h1>
<!--5.テーブルの設定-->
<table id="book1">
<thead>
<tr><th>No.</th><th>A</th><th>B</th><th>C</th>
</thead>
<tbody>
<tr><td>1</td><td>aaa</td><td>111</td><td>012</td>
<tr><td>2</td><td>bbb</td><td>222</td><td>345</td>
<tr><td>3</td><td>ccc</td><td>333</td><td>678</td>
<tr><td>4</td><td>ddd</td><td>444</td><td>901</td>
</tbody>
</table>
</body>
</html>
「3.プラグインの設定」のように「$(document).ready(function(){});」の中でjQueryメソッドとしてtableHoverプラグインを機能させます。セレクター部分に表のidを定義します。そして「tableHover();」の括弧内でカーソルを動かしている時の行・列用のクラスとして「hover」、カーソルを動かしている時のセル用のクラスとして「hoverclass」、クリックしたセルと行・列用のクラスとして「click」を設定しておきます。
その後「4.CSSの設定」において「td.hover, tr.hover{background-color: 色名;}」「td.click, th.click{background-color: 色名;}」といった形で「td.」「tr.」の後に、「3.プラグインの設定」で定義した「hover」「click」などのクラス名を定義し、色名などを定義します。リスト3のスクリプトでは表の上にカーソルがある時、そのセルの行と列を青で表示し、セル上でクリックした後その行と列を赤で表示するように設定しています。
表示に関するオプション
tableHoverメソッドのオプションの一部を表5に示します。その他のオプションに関してはtableHoverプラグインのサイトのサンプルページでも紹介されています。
| オプション名 | 既定値 | 概要 |
| allowBody | true | 表のbody部分の設定。falseを設定すると、カーソルを動かしたりクリックしたりしても色を付けられない。 |
| ignoreCols | [] | []の中に[2,3]といった形で列番号を設定すると、設定した列のみカーソルを動かしたりクリックしたりしても色を付けられない。 |
まとめ
HTMLでのテーブルの作成はとかく厄介なものですが、現在テーブルを操作できるjQueryプラグインは非常にたくさん公開されていて、数行のスクリプトを加えるだけで、見栄えが良く様々な処理ができるテーブルをウェブサイト上に表示することが可能です。今回紹介したものはそのほんの一部で比較的単純な処理を行うプラグインですが、さらに複雑な処理ができるテーブルや見栄えの良いテーブルを表示できるプラグインもたくさんあります。こうした様々なjQueryプラグインを用いてウェブサイト上で様々な処理ができるテーブルを表示させてみてはいかがでしょうか。
