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

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

<link href="css/zebraTable.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery.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ファイルです。中身は下記リストです。

• zebraTable.js
• zebraTable.css
• jquery.js

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

追記 7月4日

zebraTable.jsをjquery-1.3.2.jsに対応しました。

変更点は、ダウンロードファイルにjquery-1.3.2.jsを使いしたぐらいです。大きな変更点はありませんので、そのまま使えます。