: サイト構築 -JavaScript

[JS]表データの列と行をハイライトするスクリプト -TargetTable

表データのセルにカーソルをあわせると、その列と行をハイライトするシンプルなスクリプトをPreeoStudiosから紹介します。

スクリプトのセットアップは簡単で、既存の表データにも簡単に反映できます。

HTML

tableに「class="targettable"」を記述します。

<table class="targettable" width="100%" border="1">

JavaScript

スクリプト本体を外部スクリプトで記述し、ハイライトするカラーを指定します。

<script type="text/javascript" src="jquery.targettable.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".targettable").targetTable({
		rowBgColor: "#50b05E", rowTextColor: "#000",
		columnBgColor: "#ccc", columnTextColor: "#000",
		targetBgColor: "#00cccc", targetTextColor: "#fff"
	});
});
</script>

カラーの指定は、rowBgColorが列、columnBgColorが行、targetBgColorがセルの三つです。

TargetTableはjQueryのプラグインのため、実装にはjquery.jsが必要です。

Post on:2010年2月22日