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

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

使用方法
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='id名'>
<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名を変更可能です。

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

sponsors

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

記事作成:
記事URL:

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