javascript實現table表格隔行變色的方法
更新時間:2015年05月13日 15:20:04 作者:永遠愛好寫程序
這篇文章主要介紹了javascript實現table表格隔行變色的方法,涉及javascript針對表格元素與樣式的操作技巧,需要的朋友可以參考下
本文實例講述了javascript實現table表格隔行變色的方法。分享給大家供大家參考。具體實現方法如下:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>table間隔色</title> <script type="text/javascript"> function SetTableColor() { var tbl = document.getElementById("tblMain"); var trs = tbl.getElementsByTagName("tr"); for (var i = 0; i < trs.length; i++) { var j = i + 1; if (j % 2 == 0) { //偶數行 trs[i].style.background = "yellow"; } else { trs[i].style.background = "blue"; } } } </script> </head> <body onload="SetTableColor()"> <table id="tblMain" border="1"> <tr> <td>1</td> <td>三星</td> <td>AA</td> </tr> <tr> <td>2</td> <td>Norkia</td> <td>BB</td> </tr> <tr> <td>3</td> <td>蘋果</td> <td>CC</td> </tr> <tr> <td>4</td> <td>聯想</td> <td>DD</td> </tr> <tr> <td>5</td> <td>小米</td> <td>EE</td> </tr> <tr> <td>6</td> <td>HTC</td> <td>FF</td> </tr> </table> </body> </html>
希望本文所述對大家的javascript程序設計有所幫助。
相關文章
javascript appendChild,innerHTML,join性能比較代碼
在實際應用中,應該避免直接用innerHTML,對于大量的字符連接運算,應該考慮先運算再輸出。2009-08-08小程序開發(fā)中如何使用async-await并封裝公共異步請求的方法
在平常的項目開發(fā)中肯定會遇到同步異步執(zhí)行的問題,這篇文章主要介紹了小程序開發(fā)中如何使用async-await并封裝公共異步請求的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-01-01JavaScript數據結構yocto queue隊列鏈表代碼分析
這篇文章主要為大家介紹了JavaScript數據結構yocto queue隊列鏈表代碼分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-12-12