1、設計表格
代碼如下:

工號	姓名	年齡	性別
2014010101	張峰	56	男
2014010102	李玉	42	女
2014010103	王珂	36	男
2014010104	張鈺	31	女
2014010105	朱顧	44	男
2014010106	胡雨	35	女
2014010107	劉希	30	男
2014010108	孫宇	45	女
2014010109	谷雨	33	男
2014010110	科宇	45	女

2、設計樣式
代碼如下:
.html_body .body_div{
width: 1340;
height: 595;
}
.body_div{
font-size: 12px;
background-color: #CCCCCC;
}
.tr_odd{
background-color: orange;
}
.tr_even{
background-color: aqua;
}
.mouse_color{
background-color: green;
}
#tab{
border: 1px #FF0000 solid;
text-align: center;
width: 100%;
height: 100%;
}

3、設計JS
代碼如下:
//設置奇數行背景色
$("#tab tr:odd").find("td").addClass("tr_odd");
//設置偶數行背景色
$("#tab tr:even").find("td").addClass("tr_even");

/**
* 鼠標移到的顏色
*/
$("#tab tr").mouseover(function(){
$(this).find("td").addClass("mouse_color");
});

/**
* 鼠標移出的顏色
*/
$("#tab tr").mouseout(function(){
$(this).find("td").removeClass("mouse_color");
});

4、設計結果

（1）初始化

（2）單擊奇數行

（3）單擊偶數行

5、附錄
代碼如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com