表を読み取りやすくするjavascript「tableHover plugin」

サイトでは表をテーブルで作成することが多いですが、縦横に項目が増えていくと、どこを示しているのか判別しづらくなります。
tableHover pluginを利用すると、マウスを載せた（またはクリックした）セルを着色することができ、読み取りやすい表を作成することができます。

使用方法

tableHover pluginからjquery.tablehover.jsをjQueryからjquery.jsをダウンロードします。 
<script type="text/javascript" src="http://yourdomain/jquery.js"></script>
<script type="text/javascript" src="http://yourdomain/jquery.tablehover.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('要素名').tableHover({
		colClass: 'hover', 
		cellClass: 'hovercell',
		clickClass: 'click' 
	}); 
});
</script>
上記のように記述し、指定した要素名をtableに付与すれば完成です。
ホバー時やクリック時の色はCSSで指定します。 
td.hover, tr.hover{background-color: #69f;}
td.click, th.click{background-color: yellow;}
また、オプションには以下のようなものなどがあります。

サンプル

ABCD
A+A-B+B-C+C-D+D-
114982214
○-○○----
○-○○----
○-○-----
--○-○○-○
○-○○---○
○-○○---○
○○-○-○-○
○○-○----
○○-○--○-
○-○-○---
○-○○----
○○○-----

Javascriptサンプルページ一覧
skuare.net