本文主要是介绍【javascript】表格行间隔显示颜色，并实现高亮显示效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<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>这篇关于【javascript】表格行间隔显示颜色，并实现高亮显示效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
