案例分析:
1.用到鼠标经过onmouseover，鼠标离开onmouseout；
2.核心思路：鼠标经过tr行，当前行变换背景颜色，鼠标离开去掉当前背景颜色；
3.注意：第一行（thead里面的行）不需要变换颜色，因此我们获取的是tbody里面的行。
HTML表格：
表格由<table>标签定义。每个表格均有若干行（由<tr>标签定义），每行被分割成若干单元格（由<td>标签定义）。字母td（table data）指表格数据/单元格内容。
表格的表头使用<th>标签进行定义，大多数浏览器会把表头显示为粗体居中的文本。
<thead>定义表格的页眉，<tbody>定义表格的主体。
border用来定义边框属性，cellspacing用来定义单元格之间的距离，cellpadding用来定义单元格内容和其边框之间的空白。
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>隔行变色</title> 6 <style> 7 table{ 8 margin: 30px auto; 9 text-align: center; 10 } 11 thead{ 12 background-color: #bfbfbf; 13 font-size: 25px; 14 } 15 .bg{ 16 background-color: #bfbfbf; 17 } 18 </style> 19 </head> 20 <body> 21 <table border="1" cellspacing="0" cellpadding="10"> 22 <thead> 23 <tr> 24 <th>学号</th> 25 <th>姓名</th> 26 <th>性别</th> 27 <th>年龄</th> 28 </tr> 29 </thead> 30 <tbody> 31 <tr> 32 <td>19020101</td> 33 <td>张三</td> 34 <td>男</td> 35 <td>28</td> 36 </tr> 37 <tr> 38 <td>19020102</td> 39 <td>李四</td> 40 <td>女</td> 41 <td>27</td> 42 </tr> 43 <tr> 44 <td>19020105</td> 45 <td>王二</td> 46 <td>女</td> 47 <td>24</td> 48 </tr> 49 <tr> 50 <td>19020106</td> 51 <td>刘七</td> 52 <td>男</td> 53 <td>27</td> 54 </tr> 55 </tbody> 56 </table> 57 <script> 58 //1.获取元素，获取的是tbody里面所有的行 59 var trs=document.querySelector("tbody").querySelectorAll("tr"); 60 //2.利用循环绑定注册事件 61 for(var i=0;i<trs.length;i++){ 62 //3.鼠标经过事件 onmouseover 63 trs[i].onmouseover=function(){ 64 // this.style.backgroundColor="pink"; 这是更改style属性 65 //可以直接更改当前元素的类名为bg 66 this.className="bg"; 67 } 68 //4.鼠标移出事件 69 trs[i].onmouseout=function(){ 70 // this.style.backgroundColor=""; 71 this.className=""; 72 } 73 } 74 </script> 75 </body> 76 </html>