JS table佈局顯示奇數偶數行的顏色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
// $(function () {
// $('tr:even:not(#tr1)').css('background-color', '#eee');//選擇所有偶數行，但不包括第一行(標題行)
// })
function upcolor() {
var table = document.getElementById('mytable');
for (var i = 0; i < table.rows.length; i++) {
if (i % 2 != 0) {
table.rows[i].style.background='blue';
}
}
/* var table = document.getElementById('mytable');
for (var i = 2; i < table.rows.length; i = i + 2) {
table.rows[i].setAttribute('style', 'background-color:blue')
}*///鞏騰輝語
}
</script>
</head>
<body onload="upcolor();">
<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>
</html>