首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

黑马软件工程师2013/1/21行颜色间隔显示,光标移下高亮

2013-01-28 
黑马程序员2013/1/21行颜色间隔显示,光标移上高亮----------- android培训、java培训、java学习型技术博客、

黑马程序员2013/1/21行颜色间隔显示,光标移上高亮
----------- android培训、java培训、java学习型技术博客、期待与您交流! ------------
<script type="text/javascript">//行颜色间隔显示function trcolor(){var tabNode=document.getElementsByTagName("table")[0];var trs=tabNode.rows;for(var x=0;x<trs.length;x++){if(x%2==1){trs[x].className="one";}else{trs[x].className="two";}//高亮效果trs[x].onmouseover=function(){name=this.className;this.className="over";};trs[x].onmouseout=function(){this.className=name;}}}


</script><style>.one{background-color:#999966;}.two{background-color:#FFFF66;}.over{background-color:#FF0000;}</style></head>
<body><table style="border:#006699 1px solid"><tr><th>姓名</th><th><a href="javascript:void(0)" onclick="trcolor()"">年龄</a></th><th>地址</th></tr><tr"><td>张三</td><td>12</td><td>1</td></tr><tr><td>李四</td><td>21</td><td>2</td></tr><tr><td>王五</td><td>23</td><td>3</td></tr><tr><td>周七</td><td>19</td><td>4</td></tr><tr><td>孙八</td><td>14</td><td>5</td></tr><tr><td>六六</td><td>33</td><td>6</td></table></body></html>运行查看结果,就可以做出换行而且鼠标移动上去变高亮的效果了

热点排行