JQuery 便利機能 テーブルをシマシマに

JQueryをつかうとテーブルが簡単にシマシマに変わることができる。
今までテンプレートなどで i % 2 == 0 とかで切り替えていたのが
下記のようにstripeを追加するだけでかわる
<table class="stripe">
もちろんjqueryのincludeを忘れずに
<script type="text/javaScript" src="../js/jquery.js"></script>

応用として
マウスカーソルを当てたら自動的に色が変わるようにも簡単にできる
下記のようにイベントをloadで追加
$(document).ready(function(){
$(".stripe tr").mouseover(function(){
$(this).addClass("over");
}).mouseout(function(){
$(this).removeClass("over");
});
});
スタイルシートを定義
<style>
tr.even td {
background-color: #f3f3f3;
}
tr.over td {
background: #666666;
color: #FFFFFF;
}
</style>

これで完成！