用到的鼠標事件：（1）鼠標經過 onmouseover；（2）鼠標離開 onmouseout
核心思路：鼠標經過 tr 行的時候，當前行會改變背景顏色，鼠標離開的時候去掉背景顏色。
注意：第一行（thead 里面的行）不需要變換顏色，改變的是 tbody 里面的行。
1、獲取元素，獲取的是 tbody里面的行。
2、循環注冊綁定事件，將 tbody 里面全部的行都得到，然后全部都注冊鼠標經過和離開事件。
3、所有行綁定鼠標經過事件，鼠標經過當前元素（this）改變顏色；
4、所有行綁定鼠標離開事件，鼠標離開當前元素（this）沒有顏色；
代碼如下：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>表格隔行變色</title>
6 <style type="text/css">
7 *{
8 margin:0;padding: 0;
9 }
10 table{
11 width:500px;
12 position:relative;
13 margin:100px auto;
14 border-collapse:collapse;
15 /*合並表格單一邊框*/
16 border:1px solid #d7d7d7;
17 }
18 thead tr{
19 background-color:#ccc;
20 height:30px;
21 }
22 table tr{
23 text-align: center;
24 height:30px;
25 }
26 .bg{
27 background: #eee;
28 }
29 </style>
30 </head>
31 <body>
32 <table border=1>
33 <thead>
34 <tr>
35 <td width="40">序號</td>
36 <td width="100">前端單詞</td>
37 <td width="80">基本釋義</td>
38 <td width="50">長度</td>
39 <td width="">補充</td>
40 </tr>
41 </thead>
42 <tbody>
43 <tr>
44 <td>1</td>
45 <td>select</td>
46 <td>選擇</td>
47 <td>6</td>
48 <td>-</td>
49 </tr>
50 <tr>
51 <td>2</td>
52 <td>target</td>
53 <td>目標</td>
54 <td>6</td>
55 <td>-</td>
56 </tr>
57 <tr>
58 <td>3</td>
59 <td>input </td>
60 <td>輸出</td>
61 <td>5</td>
62 <td>-</td>
63 </tr>
64 <tr>
65 <td>4</td>
66 <td>button</td>
67 <td>按鈕</td>
68 <td>8</td>
69 <td>-</td>
70 </tr>
71 <tr>
72 <td>5</td>
73 <td>checkbox</td>
74 <td>復選框</td>
75 <td>8</td>
76 <td>-</td>
77 </tr>
78 </tbody>
79 </table>
80 <script>
81 //1、獲取tbody里面的所有的行
82 var trs = document.querySelector('tbody').querySelectorAll('tr'); 83 //2、利用循環注冊事件
84 for(var i = 0;i<trs.length;i++){ 85 var bgc = function(e){this.className = 'bg';} 86 trs[i].addEventListener('mouseover',bgc) 87 trs[i].onmouseout = function(){ 88 this.className = ''; 89 } 90 } 91 </script>
92 </body>
93 </html>
顯示效果：
當鼠標滑過時：
當鼠標離開時：
當然這個效果使用 CSS的 :hover 可以非常簡單的實現（tbody tr:hover{background: #eee;}），但是在這個例子中主要想體現的是使用JS事件和排他思想實現的效果。