用JS实现表格中隔行显示不同颜色

用JS实现表格中隔行显示不同颜色  第一种: 

 <style>   
 tr{bgColor:expression(   
     this.bgColor=((this.rowIndex)%2==0 )? 'white' : 'yellow');   
 }   
 </style>   
 <table id="oTable" width="100" border="1" style="border-collapse:collapse;">   
 <tr><td>&nbsp;</td></tr>   
 <tr><td>&nbsp;</td></tr>   
 <tr><td>&nbsp;</td></tr>   
 <tr><td>&nbsp;</td></tr>   

第二种: 

   <script language="javascript">   
      var oTable = document.all['oTable'];   
      for(var i=0;i<oTable.rows.length;i++){   
           oTable.rows[i].bgColor = (i%2==0) ? 'white' : 'yellow' ;   
      }   
 </script>   
 <table id="oTable" width="100" border="1" style="border-collapse:collapse;">   
 <tr><td>&nbsp;</td></tr>   
 <tr><td>&nbsp;</td></tr>   
 <tr><td>&nbsp;</td></tr>   

第三种(第二种的改进版): 

用布儿变量替代之:内存换时间 

 var isToggled = false;   
 
 var oTable = document.all['oTable'];   
 for(var i=0;i<oTable.rows.length;i++){   
     isToggled = ! isToggled;   
     oTable.rows[i].bgColor = isToggled ? "white" : "yellow" ;            
 }   

鼠标经过时改变背景颜色 

<table><tr><td width="100" height="100" onmouseover="style.backgroundColor='#C86F70'" onmouseout="style.backgroundColor='#DDC676'" bgcolor="#DDC676">ihandu</td></tr></table>   

我的方法一: 

 <!--<script language="javascript">   
     window.onload = function(){   //表格隔行显示不同颜色   
       var tab = document.getElementById('tab');   
       for(var i=0;i<tab.rows.length;i++){   
           tab.rows[i].bgColor = (i%2==0) ? 'white' : '#e6e6e6' ;   
      }   
     }   
 </script>   
   -->   

我的方法二: 

 <tr height = "22px" align=center style="background-color: <c:if test='${status.count%2==0}'>#FFFFFF</c:if><c:if test='${status.count%2!=0}'>#E6E6E6</c:if>" >                  

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

扫码关注云+社区

领取腾讯云代金券