例1,jquery实现隔行变色,效果图如下:
代码:
例2,jquery 隔行变色,效果图如下:
代码2:
<head>
<title>jquery 隔行变色-http://www.jb200.com</title>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
function showinfo() {
var table = document.getElementById("mytable");
for (var i = 0; i < table.rows.length; i++) {
if (i % 2 != 0) {
table.rows[i].style.background = 'blue';
}
}
}
</script>
</head>
<body onload="showinfo()">
<table id="mytable">
<tr id="tr1">
<th>
出游时间
</th>
<th>
出游地
</th>
<th>
出游方式
</th>
<th>
预计花费
</th>
</tr>
<tr>
<td>
元旦
</td>
<td>
三亚
</td>
<td>
飞机
</td>
<td>
2000
</td>
</tr>
<tr>
<td>
春节
</td>
<td>
泰国
</td>
<td>
飞机
</td>
<td>
2500
</td>
</tr>
<tr>
<td>
清明
</td>
<td>
大唐芙蓉园
</td>
<td>
火车
</td>
<td>
1500
</td>
</tr>
<tr>
<td>
五一
</td>
<td>
颐和园
</td>
<td>
火车
</td>
<td>
100
</td>
</tr>
<tr>
<td>
端午
</td>
<td>
周庄
</td>
<td>
火车
</td>
<td>
1000
</td>
</tr>
<tr>
<td>
十一
</td>
<td>
满城
</td>
<td>
汽车
</td>
<td>
30
</td>
</tr>
</table>
</body>