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. 鼠标经过事件 onm ouseover
105 trs[i].onmouseover=function() {
106 this.className='bg';
107 }
108 // 4. 鼠标离开事件 onm ouseout
109 trs[i].onmouseout=function() {
110 this.className='';
111 }
112 }
113 </script>
114 </body>
115 </html>
标签：1.075,表格,Javascript,隔行,003526,农银金穗,1.074,0.047%,1.079 来源： https://www.cnblogs.com/aimilu/p/13222797.html