Html代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>隔行換色</title> </head> <body> <table id="tab1" border="1" width="800" align="center" > <tr style="background-color: #999999;" align ="center"> <th>分校ID</th> <th>分校地區</th> <th>操作</th> </tr> <tr align ="center"> <td>1</td> <td>濟南分校</td> <td><a href="">修改</a>|<a href="">刪除</a></td> </tr> <tr align ="center"> <td>2</td> <td>昆山分校</td> <td><a href="">修改</a>|<a href="">刪除</a></td> </tr> <tr align ="center"> <td>3</td> <td>重慶分校</td> <td><a href="">修改</a>|<a href="">刪除</a></td> </tr> <tr align ="center"> <td>4</td> <td>內蒙分校</td> <td><a href="">修改</a>|<a href="">刪除</a></td> </tr> <tr align ="center"> <td>5</td> <td>大連分校</td> <td><a href="">修改</a>|<a href="">刪除</a></td> </tr> </table> </body> </html>
JavaScript代碼：
<script>
//頁面一打開就自動加載成功
window.onload=function(){
//1.通過標簽名稱進行獲取所有的tr，存放到arr數組中去
var arr=document.getElementsByTagName("tr");
//2.判斷奇偶數 添加不同的樣式 遍歷數組
for(var i=1;i<arr.length;i++){
//如果是偶數行
if(i%2==0){
// 偶數的某一行的樣式背景顏色設置為= 亮粉色
arr[i].style.backgroundColor="lightpink";
}else{//否則是奇數行
// 奇數的某一行的樣式背景顏色設置為 深天空藍
arr[i].style.backgroundColor="deepskyblue";
}
}
}
</script>
效果圖:
作者： 楊校
出處： http://www.cnblogs.com/xiaoxiao5016
分享是快樂的，也見證了個人成長歷程，文章大多都是工作經驗總結以及平時學習積累，基於自身認知不足之處在所難免，也請大家指正，共同進步。
本文版權歸作者所有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出, 如有問題， 可郵件（397583050@qq.com）咨詢。