jQuery实现 有利用到jQuery的伪选择器:odd Selector, :even Selector, 事件hover( handlerIn, handlerOut )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11 demo - table odd color</title>
<style>
table{
border-collapse: collapse;
}
table, td, th{
border: 1px solid #ccc;
}
th, td{
padding:8px;
}
.silver{
background-color: green !important;
}
</style>
</head>
<body>
<table>
<thead><tr>
<th>订单编号</th>
<th>订单日期</th>
<th>订单总额</th>
<th>收货人</th>
<th>订单状态</th>
</tr></thead>
<tbody><tr>
<td>9319081</td>
<td>2015-01-16 11:04</td>
<td>3200</td>
<td>张大力</td>
<td>已签收</td>
</tr><tr>
<td>9319082</td>
<td>2015-01-16 11:04</td>
<td>4300</td>
<td>王晓玲</td>
<td>已签收</td>
</tr><tr>
<td>9319083</td>
<td>2015-01-16 11:04</td>
<td>98</td>
<td>张大力</td>
<td>派货中</td>
</tr><tr>
<td>9319084</td>
<td>2015-01-16 11:04</td>
<td>2883</td>
<td>张大力</td>
<td>已签收</td>
</tr><tr>
<td>9319085</td>
<td>2015-01-16 11:04</td>
<td>2883</td>
<td>张大力</td>
<td>已签收</td>
</tr><tr>
<td>9319086</td>
<td>2015-01-16 11:04</td>
<td>2883</td>
<td>王小玲</td>
<td>待付款</td>
</tr></tbody>
</table>
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function(){
$("tbody tr:odd").css("background-color", "#F88E8B");
$("tbody tr:even").css("background-color", "#cbcdce");
$("tr").eq(0).css("background-color", "gray");
$("tbody tr").hover(function(){
$(this).addClass("silver");
},
function(){
$(this).removeClass("silver");
});
});
</script>
</body>
</html>
参考：
