範例程式使用 jQuery 功能，如下：

1. 基、偶數列 :odd :even
2. 動態增加 CSS .addClass()
3. 動態刪除 CSS.removeClass()
4. 按鈕事件綁定 .on()
5. 滑鼠進入元件 .mouseenter()
6. 滑鼠離開元件 .mouseout()
7. 滑鼠移出移入 .hover()

HTML

<table id="people">
<tbody>
    <tr><td>1</td><td>jason</td></tr>
    <tr><td>2</td><td>thomas</td></tr>
    <tr><td>3</td><td>kert</td></tr>
    <tr><td>4</td><td>jay</td></tr>
</tbody>
</table>

CSS

#people { width:98%; border-collapse:collapse; } 
#people th, #people td{ border: silver 1px solid; text-align:center; }
.odd{background-color:#EFF1F1;}
.even{background-color:#F8F8F8;}
.enter{background-color: #0099CC;}

範例(版本一)

// 基、偶數列新增 css 
$("#people tr:odd").addClass("odd");
$("#people tr:even").addClass("even");

// 為 id 等於 people 的 table元件 的 每一個 row  附加 mouseenter 和 mouseout 事件
$("#people").on("mouseenter","tr",function(){
    $(this).addClass("enter"); // 觸發 mouseenter 事件 新增 css 
}).on("mouseout","tr",function(){
    $(this).removeClass("enter"); // 觸發 mouseout 事件 移除 css 
});

範例(版本二)

// 基、偶數列新增 css 
$("#people tr:odd").addClass("odd");
$("#people tr:even").addClass("even");

// 為 id 等於 people 的 table元件 的 每一個 row  附加 mouseenter 和 mouseout 事件
$("#people tr").hover(
    function(){
        $(this).addClass("enter"); // 觸發 mouseenter 事件 新增 css 
    },
    function(){
        $(this).removeClass("enter"); // 觸發 mouseleave 事件 移除 css 
    }
);

優點：支援動態增加資料。(注意：CSS 優先順序)
執行結果，請點我 -> http://alwaysenjoyit.blogspot.tw/2012/05/table.html

附註：jQuery API -> <http://api.jquery.com/ >