css代码如下：
<style> *{ margin: 0; padding: 0; } table{ width: 80%; text-align: center; margin: 50px auto; border: 1px solid black; border-collapse: collapse; /* 合并边框 没有空隙 */ } th,td{ order: 1px solid black; padding: 15px; } td{ font-size: 18px; } .odd{ background-color: rgb(253, 197, 206); } .even{ background-color: rgb(172, 250, 152); } </style>~html代码如下
<table> <thead> <tr> <th>编号</th> <th>姓名</th> <th>出生日期</th> </tr> </thead> <tbody> <tr> <td>01</td> <td>张</td> <td>2001.06.10</td> </tr> <tr> <td>02</td> <td>张</td> <td>2001.06.10</td> </tr>~ </tbody> </table>~js代码如下：
<script> var trs = document.querySelectorAll('tbody tr') console.log(trs) for(var i=0;i<trs.length;i++){ if(i%2==0){ trs[i].className='odd' }else{ trs[i].className='even' } // 为tr注册 onmouseover事件（鼠标进入） trs[i].onmouseover=function(){ this.style.backgroundColor='#eee' } // 为 tr 注册 onmouseout 事件(鼠标离开) trs[i].onmouseout=function(){ this.style.backgroundColor='' } } </script>~