JS中table隔行换色
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <table id="tab1" border="" cellspacing="" cellpadding="" width="40%"> 9 <thead> 10 <tr> 11 <td>ID</td> 12 <td>姓名</td> 13 <td>年龄</td> 14 </tr> 15 </thead> 16 <tbody> 17 <tr> 18 <td>1</td> 19 <td>张三</td> 20 <td>27</td> 21 </tr> 22 <tr> 23 <td>2</td> 24 <td>李四</td> 25 <td>20</td> 26 </tr> 27 <tr> 28 <td>3</td> 29 <td>张可爱</td> 30 <td>29</td> 31 </tr> 32 <tr> 33 <td>4</td> 34 <td>李XX</td> 35 <td>24</td> 36 </tr> 37 <tr> 38 <td>5</td> 39 <td>马小关</td> 40 <td>35</td> 41 </tr> 42 </tbody> 43 </table> 44 </body> 45 <script type="text/javascript"> 46 window.onload = function(){ 47 48 var oTab = document.getElementById("tab1"); 49 var oldColor = ""; 50 //鼠标移到单元格上变色 51 for(var i=0;i<oTab.tBodies[0].rows.length;i++){ 52 53 oTab.tBodies[0].rows[i].onmouseover=function(){ 54 oldColor = this.style.background; 55 this.style.background = "yellow"; 56 } 57 58 oTab.tBodies[0].rows[i].onmouseout=function(){ 59 this.style.background = oldColor; 60 } 61 62 //实现各行换色 63 if(i%2==0){ 64 oTab.tBodies[0].rows[i].style.background = "#ccc"; 65 }else{ 66 oTab.tBodies[0].rows[i].style.background = ""; 67 } 68 69 } 70 } 71 </script> 72 </html>