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

jQueryを使ったzebraTable.jsというテーブルをゼブラ(ストライプ)模様にできるJavaScriptライブラリを公開しました。

セル部分をホバーするとハイライトの効果もあります。

MITライセンスで公開しています。

デモページはコチラから

使い方は、HTMLのhead要素に下記のようにzebraTable.jsjquery.jszebraTable.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.csszebraTable.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を使いしたぐらいです。大きな変更点はありませんので、そのまま使えます。