jQuery的隔行换色

时间:2022-06-06 16:03:25
 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>隔行换色</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("tr:even").not(":first").css("background","#eee");
}); /*
window.onload = function() {
var rows = document.getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++) {
if (i % 2 == 0 && i != 0)
rows[i].style.backgroundColor = "#eee";
}
};
*/
</script>
</head>
<body>
<table id="orders">
<thead >
<tr style="background-color: #aaaaaa;">
<th>序号</th>
<th>订单号</th>
<th>商品名称</th>
<th>价格(元)</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>10035900</td>
<td>Nike透气减震运动鞋</td>
<td>231.00</td>
</tr>
<tr>
<td>2</td>
<td>10036114</td>
<td>天美太阳伞</td>
<td>51.00</td>
</tr>
<tr>
<td>3</td>
<td>10035110</td>
<td>万圣节儿童蜘蛛侠装</td>
<td>31.00</td>
</tr>
<tr>
<td>4</td>
<td>10032900</td>
<td>jQuery权威指南</td>
<td>22.50</td>
</tr>
</table>
</body>
</html>