(28)报表隔行变色,并且鼠标移入高亮显示,鼠标移出显示原来的颜色
(28)表格隔行变色,并且鼠标移入高亮显示,鼠标移出显示原来的颜色
基本思想:使用表格中某一行的onmouseover和onmouseout事件,当鼠标移进的时候保存当前行的背景颜色并且设置当前行的颜色为要高亮的颜色,当鼠标移出的时候设置为保存的行的颜色,即可保持在隔行变色中高亮显示鼠标所指行并且鼠标移出的时候能够显示原来的行的颜色。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title></title> <script> window.onload=function () { var oTab=document.getElementById('tab1'); var oldColor='';//用于保存原来一行的颜色 for(var i=0;i<oTab.tBodies[0].rows.length;i++)//oTab.tBodies[0].rows.length表示tBodies中有几行 { oTab.tBodies[0].rows[i].onmouseover=function () { oldColor=this.style.background; this.style.background="green"; }; oTab.tBodies[0].rows[i].onmouseout=function () { this.style.background=oldColor;//鼠标移出的时候将本行的颜色设置为原来的颜色,而原来的颜色保存在oldColor中 }; if(i%2) { oTab.tBodies[0].rows[i].style.background="#CCC"; }else{ oTab.tBodies[0].rows[i].style.background=""; } } }; </script> </head> <body> <table id="tab1" border="1" width="500"> <thead> <td>ID</td> <td>姓名</td> <td>年龄</td> </thead> <tbody> <tr> <td>1</td> <td>Xuan</td> <td>23</td> </tr> <tr> <td>2</td> <td>XXX</td> <td>25</td> </tr> <tr> <td>3</td> <td>SSS</td> <td>24</td> </tr> <tr> <td>4</td> <td>李四</td> <td>26</td> </tr> <tr> <td>5</td> <td>王五</td> <td>29</td> </tr> </tbody> </table> </body> </html>
效果图: