js table隔行變色效果程式碼例項
本章節分享一段程式碼例項,它實現了表格隔行變色效果。
這樣可以提高行與行之間的辨識度,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script type="text/javascript"> function SetTableColor(){ var tbl=document.getElementById("tblMain"); var trs=tbl.getElementsByTagName("tr"); for(var index=0;index<trs.length;index++){ var j=index+1; if(j%2==0) { trs[index].style.background="yellow"; } else{ trs[index].style.background="blue"; } } } window.onload=function(){ SetTableColor() } </script> </head> <body> <table id="tblMain" border="1"> <tr> <td>1</td> <td>螞蟻部落一</td> <td>css教程</td> </tr> <tr> <td>2</td> <td>螞蟻部落二</td> <td>div教程</td> </tr> <tr> <td>3</td> <td>螞蟻部落三</td> <td>jquery教程</td> </tr> <tr> <td>4</td> <td>螞蟻部落四</td> <td>softwhy.com</td> </tr> </table> </body> </html>
上面的程式碼實現了隔行變色效果,下面介紹一下它的實現原理。
一.程式碼註釋:
(1).function SetTableColor(){},此函式實現了隔行變色效果。
(2).var tbl=document.getElementById("tblMain"),獲取table表格元素物件。
(3).var trs=tbl.getElementsByTagName("tr"),獲取tr元素集合。
(4).for(var index=0;index<trs.length;index++){
var j=index+1;
if(j%2==0) {
trs[index].style.background="yellow";
}
else{
trs[index].style.background="blue";
}
}裡面的程式碼通過求餘數的方式實現隔行變色效果。
二.相關閱讀:
(1).getElementsByTagName()方法可以參閱document.getElementsByTagName()一章節。
(2).for迴圈可以參閱javascript for一章節。
相關文章
- table表格隔行變色程式碼例項
- jQuery 隔行變色效果程式碼例項jQuery
- jQuery隔行變色效果程式碼例項jQuery
- js隔行變色程式碼例項JS
- CSS 隔行變色程式碼例項CSS
- jQuery table表格隔行換色程式碼例項jQuery
- js實現li元素隔行背景變色例項程式碼JS
- jQuery實現的隔行變色程式碼例項jQuery
- js字型顏色隨機變化效果程式碼例項JS隨機
- JavaScript隔行變色效果JavaScript
- JavaScript 表格隔行變色效果JavaScript
- js實現的表格隔行變色和滑鼠懸浮變色程式碼JS
- 滑鼠懸浮按鈕背景變色效果程式碼例項
- javascript文字彩虹式顏色漸變效果程式碼例項JavaScript
- jQuery表格隔行變色效果詳解jQuery
- js table表格排序程式碼例項JS排序
- 滑鼠滑過實現table表格行背景變色程式碼例項
- js重力球效果程式碼例項JS
- js煙花效果程式碼例項JS
- js鐘錶效果程式碼例項JS
- js秒錶效果程式碼例項JS
- js隨機顏色例項程式碼JS隨機
- js table表格操作大全程式碼例項JS
- 表格行背景交替變色例項程式碼
- js淡入淡出效果例項程式碼JS
- 支援鍵盤上下鍵的隔行變色程式碼
- canvas實現的藍色雨滴效果程式碼例項Canvas
- javascript滑鼠懸浮行變色程式碼例項JavaScript
- CSS 表格隔行變色CSS
- jQuery表格隔行變色jQuery
- js不重複抽獎效果程式碼例項JS
- js元素上下移動效果程式碼例項JS
- js簡單日曆效果程式碼例項JS
- js小球拋物線效果程式碼例項JS
- js簡單摺紙效果程式碼例項JS
- js圖片碎片化效果程式碼例項JS
- js元素的震動效果程式碼例項JS
- js左右滑動選項卡效果程式碼例項JS