js實現表格隔行變色和滑鼠移入高亮
阿新 • • 發佈:2018-12-04
程式碼如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> </style> <script type="text/javascript"> window.onload=function() { var oTab=document.getElementById('tab1') var oldColor=''; function toColor() { for(var i=0;i<oTab.tBodies[0].rows.length;i++) //隔行變色 { 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; } if(i%2){ oTab.tBodies[0].rows[i].style.background=''; } else { oTab.tBodies[0].rows[i].style.background='#ccc'; } } } toColor(); } </script> </head> <body> <table border="1" id="tab1" width="500"> <thead> <td>ID</td> <td>姓名</td> <td>年齡</td> <td>操作</td> </thead> <tbody> <tr> <td>1</td> <td>張三</td> <td>34</td> <td></td> </tr> <tr> <td>2</td> <td>李四</td> <td>11</td> <td> </td> </tr> <tr> <td>3</td> <td>王五</td> <td>34</td> <td></td> </tr> <tr> <td>4</td> <td>李麻子</td> <td>39</td> <td></td> </tr> <tr> <td>5</td> <td>HuHansan</td> <td>39</td> <td></td> </tr> </tbody> </table> </body> </html>