【javascript】表格行间隔显示颜色，并实现高亮显示效果

来源：互联网发布：coreldraw x6破解软件编辑：程序博客网时间：2024/05/01 08:37

<script type="text/javascript"> var name;  //存储tr对象的类名，当鼠标移开时进行恢复 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>