用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>" > 

你可能感兴趣的:(用JS实现表格中隔行显示不同颜色)