skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです
表を読み取りやすくする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;}
また、オプションには以下のようなものなどがあります。
・allowBody：表本体に色をつける（falseでなし）
・ignoreCols：色をつけない項目を指定（[4,5,6]）
表を読み取りやすくするjavascript「tableHover plugin」サンプル
記事作成：2007年11月09日
▼表を読み取りやすくするjavascript「tableHover plugin」へのコメントはtwitterにて受け付けています。
twitterでコメントする
前の記事：コードのシンタックスハイライトをリアルタイムで行うjavascript「CodePress」
次の記事：Movable Typeでアンケートを作成できるプラグイン「Polls」
