标签：The 绑定 set load center 名称 单位 color charset
鼠标经过，行变色；鼠标离开，行恢复。
实现效果
代码如下
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>
标签：The 绑定 set load center 名称 单位 color charset
原文地址：https://www.cnblogs.com/aimilu/p/13222797.html
