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

2018-03-30 12:21:01 浏览数 (1)

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

代码语言:javascript复制
 <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>   

第二种: 

代码语言:javascript复制
   <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>   

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

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

代码语言:javascript复制
 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" ;            
 }   

鼠标经过时改变背景颜色 

代码语言:javascript复制
<table><tr><td width="100" height="100" onmouseover="style.backgroundColor='#C86F70'" onmouseout="style.backgroundColor='#DDC676'" bgcolor="#DDC676">ihandu</td></tr></table>   

我的方法一: 

代码语言:javascript复制
 <!--<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>   
   -->   

我的方法二: 

代码语言:javascript复制
 <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 人点赞