CSS与JavaScript对比-表格隔行变色案例
功能：鼠标经过，行变色；鼠标离开，行恢复。
实现效果
方法一：使用Javascript实现代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 table { 9 width: 800px; 10 margin: 100px auto; 11 text-align: center; 12 border-collapse: collapse; 13 font-size: 14px; 14 } 15 16 thead tr { 17 height: 30px; 18 background-color: skyblue; 19 } 20 21 tbody tr { 22 height: 30px; 23 } 24 25 tbody td { 26 border-bottom: 1px solid #d7d7d7; 27 font-size: 12px; 28 color: blue; 29 } 30 31 .bg { 32 background-color: #eee; 33 } 34 </style> 35 </head> 36 <body> 37 <table> 38 <thead> 39 <tr> 40 <th>代码</th> 41 <th>名称</th> 42 <th>最新公布净值</th> 43 <th>累计净值</th> 44 <th>前单位净值</th> 45 <th>净值增长率</th> 46 </tr> 47 </thead> 48 <tbody> 49 <tr> 50 <td>003526</td> 51 <td>农银金穗3个月定期开放债券</td> 52 <td>1.075</td> 53 <td>1.079</td> 54 <td>1.074</td> 55 <td>+0.047%</td> 56 </tr> 57 <tr> 58 <td>003526</td> 59 <td>农银金穗3个月定期开放债券</td> 60 <td>1.075</td> 61 <td>1.079</td> 62 <td>1.074</td> 63 <td>+0.047%</td> 64 </tr> 65 <tr> 66 <td>003526</td> 67 <td>农银金穗3个月定期开放债券</td> 68 <td>1.075</td> 69 <td>1.079</td> 70 <td>1.074</td> 71 <td>+0.047%</td> 72 </tr> 73 <tr> 74 <td>003526</td> 75 <td>农银金穗3个月定期开放债券</td> 76 <td>1.075</td> 77 <td>1.079</td> 78 <td>1.074</td> 79 <td>+0.047%</td> 80 </tr> 81 <tr> 82 <td>003526</td> 83 <td>农银金穗3个月定期开放债券</td> 84 <td>1.075</td> 85 <td>1.079</td> 86 <td>1.074</td> 87 <td>+0.047%</td> 88 </tr> 89 <tr> 90 <td>003526</td> 91 <td>农银金穗3个月定期开放债券</td> 92 <td>1.075</td> 93 <td>1.079</td> 94 <td>1.074</td> 95 <td>+0.047%</td> 96 </tr> 97 </tbody> 98 </table> 99 <script> 100 // 1.获取元素 获取的是 tbody 里面所有的行 101 var trs=document.querySelector('tbody').querySelectorAll('tr'); 102 // 2. 利用循环绑定注册事件 103 for (var i=0;i<trs.length;i++){ 104 // 3. 鼠标经过事件 onmouseover 105 trs[i].onmouseover=function() { 106 this.className='bg'; 107 } 108 // 4. 鼠标离开事件 onmouseout 109 trs[i].onmouseout=function() { 110 this.className=''; 111 } 112 } 113 </script> 114 </body> 115 </html>
不使用JS，用CSS鼠标悬浮及样式设置。实现如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 table { 9 width: 800px; 10 margin: 100px auto; 11 text-align: center; 12 border-collapse: collapse; 13 font-size: 14px; 14 } 15 16 thead tr { 17 height: 30px; 18 background-color: skyblue; 19 } 20 21 tbody tr { 22 height: 30px; 23 } 24 25 tbody td { 26 border-bottom: 1px solid #d7d7d7; 27 font-size: 12px; 28 color: blue; 29 } 30 /* 不使用JS，用CSS鼠标悬浮及样式设置。 */ 31 tbody tr:hover { 32 background-color: #eee; 33 } 34 35 </style> 36 </head> 37 <body> 38 <table> 39 <thead> 40 <tr> 41 <th>代码</th> 42 <th>名称</th> 43 <th>最新公布净值</th> 44 <th>累计净值</th> 45 <th>前单位净值</th> 46 <th>净值增长率</th> 47 </tr> 48 </thead> 49 <tbody> 50 <tr> 51 <td>003526</td> 52 <td>农银金穗3个月定期开放债券</td> 53 <td>1.075</td> 54 <td>1.079</td> 55 <td>1.074</td> 56 <td>+0.047%</td> 57 </tr> 58 <tr> 59 <td>003526</td> 60 <td>农银金穗3个月定期开放债券</td> 61 <td>1.075</td> 62 <td>1.079</td> 63 <td>1.074</td> 64 <td>+0.047%</td> 65 </tr> 66 <tr> 67 <td>003526</td> 68 <td>农银金穗3个月定期开放债券</td> 69 <td>1.075</td> 70 <td>1.079</td> 71 <td>1.074</td> 72 <td>+0.047%</td> 73 </tr> 74 <tr> 75 <td>003526</td> 76 <td>农银金穗3个月定期开放债券</td> 77 <td>1.075</td> 78 <td>1.079</td> 79 <td>1.074</td> 80 <td>+0.047%</td> 81 </tr> 82 <tr> 83 <td>003526</td> 84 <td>农银金穗3个月定期开放债券</td> 85 <td>1.075</td> 86 <td>1.079</td> 87 <td>1.074</td> 88 <td>+0.047%</td> 89 </tr> 90 <tr> 91 <td>003526</td> 92 <td>农银金穗3个月定期开放债券</td> 93 <td>1.075</td> 94 <td>1.079</td> 95 <td>1.074</td> 96 <td>+0.047%</td> 97 </tr> 98 </tbody> 99 </table> 100 </body> 101 </html>
