tableのどこを見ているか色付けてくれるJavaScript「Table Highlighter」

tableで作られた表組みを見ていると、いまどこを見ているのかわかりにくくなります。
特に縦長の表だとなにがなんだかわかりません。
そこで、いまどこを見ているのか、色を付けて表示してくれるJavaScriptTable Highlighterを紹介します。

sponsors

使用方法

Plugins | jQuery Pluginsからjquery.tablehightlight.jsを、jQueryからjquery.jsをダウンロードします。

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.tablehightlight.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#id名').tablehighlight();
});
</script>
<style>
.active_column_header, .active_row_header{background:#A3A9E1;} //activeヘッダーカラー
.active_row_data{background:#B7BEFC;} //activeラインカラー
tr.row td.active_position{background:black;color:white;} //acticeセルカラー
</style>
あとは以下のように表組みを行います。

<table id='demo'>
<thead>
<tr class='heading'>
		<td></td>
		<th class='column_header'>Visits</th>
		<td class='column_header'>Unique Visits</td>
</tr>
</thead>
<tbody>
<tr class='row'>
	<th class='row_header'>テキスト</a></th>
	<td class='row_data'>109</td>
	<td class='row_data'>82</td>
</tr>
</tbody>
</table>
行ヘッダー部分にはcolumn_headerを列ヘッダーにはrow_header、セルにはrow_dataクラスを付与します。
なお、これらはオプションにてclass名を変更可能です。

サンプル

Visits Unique Visits Average Time Bounce Rate
jQuery Smart Modal 109 82 00:02:50 81.58%
jQuery Draggable 54 46 00:03:33 59.09%
Expanding Grid 36 35 00:02:59 83.33%

sponsors


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