4.JavaScript实现表格隔行变色-蒲公英云

4.JavaScript实现表格隔行变色

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>~