テーブルをゼブラ（ストライプ）模様にできるzebraTable.jsを公開しました。

使い方は、HTMLのhead要素に下記のようにzebraTable.js、jquery-1.2.6.pack.jsとzebraTable.cssを設置するだけです。

<link href="css/zebraTable.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="js/zebraTable.js"></script>

以下、zebraTable.cssとzebraTable.jsの説明です。

zebraTable.css

セルをホバーしたときにセルの背景色が変わるのに必要です。

zebraTable.jsはテーブルをゼブラ（ストライプ）模様にします。

JavaScript

$(function(){
		   $("tr:even").css("backgroundColor","#484848"); 
	});

$(function(){
		   $("tr:even").css("color","#FFF9E0"); 
	});

$(function(){
		   $("tr:first").css("color","white"); 
	});

$(function(){
		   $("tr:first").css("backgroundColor","#124384"); 
	});

$(function(){
		   $("td").hover(hmouse,omouse);   //ホバー部分
		   });

function hmouse(){
		   $(this).addClass("heighlight");
		   }

function omouse(){
		   $(this).removeClass("heighlight");
		   }

セルの色を変えたいときは、zebraTable.jsの#484848の部分を変えてください。

ホバー時の背景色の変更は、zebraTable.cssのbackground-colorの色を変えてください。

下記ブラウザで、検証済みです。

• Firefox3
• Internet Explore7
• Opera9.5
• Safari3.1

zebraTable.jsのダウンロードはコチラから

ダウンロードファイルはzipファイルです。中身は下記リストです。

• js/zebraTable.js
• css/zebraTable.css

js/zebraTable.jsの利用には、jquery-1.2.6.pack.jsが必要です。