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

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

使用方法
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;}

また、オプションには以下のようなものなどがあります。
 ・allowBody:表本体に色をつける(falseでなし)
 ・ignoreCols:色をつけない項目を指定([4,5,6])
表を読み取りやすくするjavascript「tableHover plugin」サンプル

sponsors

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

記事作成:
記事URL:

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