先定义好表格的奇偶行样式，如下代码：
代码如下:
body {
font-size:12px;
}
th {
color: #FFFFFF;
background: #A172AC;
}
table,table td,table th {
padding: 0.5em;
margin: 0;
border:0;
border-spacing:0;
}
/* odd items 1,3,5,7,... */
table tbody tr.odd,
.odd {
background: #FBD106;
}
/* even items 2,4,6,8,... */
table tbody tr.even,
.even {
background: #E6453B;
}
/* hovered items */
.odd:hover,
.even:hover,
.hover {
background: #4BB747;
color: #FFFFFF;
}
再就是页面代码了：
代码如下:
用jquery实现table奇偶行不同色
$(document).ready(function () {
//排除th标签，th可能是有自己特有的样式，所以定义th样式。
//$("tr:not(:has(th)):odd").addClass("odd");
//$("tr:not(:has(th)):even").addClass("even");
$("tr:odd").addClass("odd");
$("tr:even").addClass("even");
//如果CSS中不定义".odd:hover"和".even:hover"就需要toggleClass()。
/*
$("tr").mouseover(function () {
$(this).toggleClass(".hover");
});
$("tr").mouseout(function () {
$(this).toggleClass(".hover");
});
*/
});
data
data
data
data
data
data
data
data
data
data
data
data
data
data
data
data
data
data
data
data
如果不需要鼠标事件，只需奇偶行不同色直接可以用CSS搞定。
代码如下:
table tr:nth-child(even) td,
table tr:nth-child(even) th {
background-color: #FBD106;
}
table tr:nth-child(odd) td,
table tr:nth-child(odd) th {
background-color: #E6453B;
}