tableで作った表組のどこを見ているかを明示するJavaScript「TargetTable jQuery Plugin」

大きな表組みを作ると今どこを見ているのかわからなくなってしまいます。
どこを見ているのか明示できるとユーザーフレンドリーかもしれません。
今回はTargetTable jQuery Pluginを利用して実現します。

使用方法

TargetTable jQuery PluginからjQuery.TargetTable.jsをjQueryからjquery.jsをダウンロードします。

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.targettable.js"></script>						
<script type="text/javascript">
$(document).ready(function(){
	$(".class名").targetTable({
		rowBgColor: "#50b05E", //横列背景
		rowTextColor: "#000", //横列テキスト色
		columnBgColor: "#ccc", //縦列背景
		columnTextColor: "#000", //縦列テキスト色
		targetBgColor: "#00cccc", //ホバーセルの背景色
		targetTextColor: "#fff" //ホバーセルのテキスト色
	});
});
</script>
上記のclassを振ったtableを記述すれば完成です。

<table class="targettable" width="600">
	<tr>
		<th>ID</th>
		<th>Name</th>
		<th>Surname</th>
		<th>Another Column</th>
	</tr>
	<tr>
		<td>1</td>
		<td>Mark</td>
		<td>Camilleri</td>
		<td>#4122</td>
	</tr>
</table>

サンプル

IDNameSurnameAnother Column
1MarkCamilleri#4122
2PhilipBorg#242
3DelfCamilleri#322

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