javascript簡單實現(xiàn)表格行間隔顯示顏色并高亮顯示
更新時間：2013年11月29日 15:37:48 作者：
表格行間隔顯示顏色并實現(xiàn)高亮顯示，這種效果大家都有見到過吧，下面就為大家詳細(xì)介紹下,需要的朋友可不要錯過
復(fù)制代碼 代碼如下:
<script type="text/javascript">
var name; //存儲tr對象的類名，當(dāng)鼠標(biāo)移開時進(jìn)行恢復(fù)
function trcolor(){ //表格行顏色間隔顯示
var tabNode = document.getElementsByTagName("table")[0];
var trNodes = tabNode.rows;
for(var x=1;x<trNodes.length;x++){
if(x%2 == 1)
trNodes[x].className = "one" ;
else
trNodes[x].className = "two" ;
trNodes[x].onmouseover = function(){ //高亮顯示
name = this.className;
this.className = "over";
}
trNodes[x].onmouseout = function(){ //tr對象添加onmouseout事件屬性
this.className = name ;
}
}
}
window.onload = trcolor ;
</script>
<style type="text/css">
table{ width:60%; border:solid 1px #0066FF;}
table td {border:solid 1px #0099ff;}
a{ text-decoration: none;}
.one{background-color: red;}
.two{background-color: blue;}
.over{background-color: yellow;}
</style>
</head>
<body>
<table>
<tr>
<td>姓名</td><td>年齡</td><td>地址</td>
</tr>
<tr>
<td>張三</td><td>23</td><td>北京</td>
</tr>
<tr>
<td>李四</td><td>25</td><td>上海</td>
</tr>
<tr>
<td>王五</td><td>15</td><td>廣州</td>
</tr>
<tr>
<td>唐總</td><td>20</td><td>長沙</td>
</tr>
</table>
</body>
相關(guān)文章
本文主要介紹了使用javaScript和jQuery制作光棒效果的示例代碼，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
詳解JavaScript中的數(shù)組合并方法和對象合并方法
這篇文章主要介紹了JavaScript中的數(shù)組合并方法和對象合并方法,通過代碼的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了es6函數(shù)name屬性,結(jié)合實例形式分析了es6函數(shù)name屬性基本原理、功能、用法及操作注意事項,需要的朋友可以參考下2020-04-04
javascript新建標(biāo)簽,判斷鍵盤輸入,以及判斷焦點(示例代碼)
這篇文章主要介紹了javascript新建標(biāo)簽,判斷鍵盤輸入,以及判斷焦點(示例代碼)。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
js當(dāng)一個變量為函數(shù)時 應(yīng)該注意的一點細(xì)節(jié)小結(jié)
變量testFun為一個匿名函數(shù)，匿名函數(shù)返回的一個testFun.init對象（也是一個匿名函數(shù)）2011-12-12
寫任何編程代碼，不同的開發(fā)者都會有不同的見解。但參考一下總是好的，下面是來自Javascript Toolbox發(fā)布的14條最佳JS代碼編寫技巧，Sofish翻譯(1,2)。2011-01-01
數(shù)組如何求最大值,想必很多的朋友都不會吧,下面這篇文章主要給大家介紹了關(guān)于js求數(shù)組最大值的常用方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
通過JavaScript實現(xiàn)CSS和JS文件的動態(tài)加載
在現(xiàn)代Web開發(fā)中,動態(tài)加載CSS和JavaScript文件是一個常見的需求,這種技術(shù)可以用來優(yōu)化頁面加載速度,減少初始加載時間,并提高用戶體驗,本文將詳細(xì)介紹如何通過JavaScript實現(xiàn)CSS和JS文件的動態(tài)加載,包括不同的加載方法、注意事項以及最佳實踐2024-11-11
這篇文章主要為大家詳細(xì)介紹了js判斷鼠標(biāo)移入移出方向的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了javascript實現(xiàn)校驗文件上傳控件,實例分析了javascript檢測上傳文件類型是否為圖片的功能,非常具有實用價值,需要的朋友可以參考下2015-04-04