您當前位置：首頁 > web前端 > jscript > JavaScript 實現(xiàn)表格隔行換色的效果

JavaScript 實現(xiàn)表格隔行換色的效果

來源：程序員人生發(fā)布時間：2014-04-09 16:48:18 閱讀次數(shù)：2933次

通過為<tr>元素添加屬性或類型選擇器，再通過CSS設置可以實現(xiàn)雙色表格，但如果表格很長，逐個元素添加可真麻煩。而且這樣的代碼維護起來不容易。所以比較好的方式是用JS實現(xiàn)。其實在前幾天的網頁特效中，我們也曾發(fā)表了這樣的例子《表格隔行換色特效》。

原理其實很簡單：利用getElementsByTagName得到所有的<tr>元素，然后分別為奇數(shù)項和偶數(shù)項的<tr>元素添加背景顏色。

讓我們一起看一下效果：

<html><head><title>雙色表格</title><style type="text/css"></style><script type="text/javascript" > function color() { //把表頭設為紫色 var th = document.getElementById("th"); th.style.background = "violet" //1.得到所有<tr>元素 var trs = document.getElementsByTagName("tr"); var i; for(i = 1; i <trs.length; i++) { //2.改變<tr>元素的背景顏色 if(i % 2 == 0) { trs[i].style.background = "yellow"; } else { trs[i].style.background = "olive"; } } } window.onload = color; </script></head><body><center><table><tr id="th"><th>姓名</th><th>科目</th><th>成績</th></tr><tr><td>張三</td><td>語文</td><td>90</td></tr><tr><td>張三</td><td>數(shù)學</td><td>87</td></tr><tr><td>李四</td><td>數(shù)學</td><td>68</td></tr><tr><td>王五</td><td>英語</td><td>76</td></tr></table></center></body></html>
提示：可修改后代碼再運行!

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 你的網站價值多少：談網站未來的生存空間

下一篇 uniqueidentifier數(shù)據類型常識及應用

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

JavaScript 實現(xiàn)表格隔行換色的效果