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

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

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

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

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

讓我們一起看一下效果：

<html><head><title>雙色表格</title><style type="text/css"></style><script type="text/javascript" > function color() { //把表頭設(shè)為紫色 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>成績(jī)</th></tr><tr><td>張三</td><td>語(yǔ)文</td><td>90</td></tr><tr><td>張三</td><td>數(shù)學(xué)</td><td>87</td></tr><tr><td>李四</td><td>數(shù)學(xué)</td><td>68</td></tr><tr><td>王五</td><td>英語(yǔ)</td><td>76</td></tr></table></center></body></html>
提示：可修改后代碼再運(yùn)行!

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
程序員人生

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

上一篇 你的網(wǎng)站價(jià)值多少：談網(wǎng)站未來(lái)的生存空間

下一篇 uniqueidentifier數(shù)據(jù)類型常識(shí)及應(yīng)用

分享到:

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

為碼而活

積分：4237

15粉絲

7關(guān)注

欄目熱點(diǎn)

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

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