用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" οnmοuseοver="style.backgroundColor='#C86F70'" οnmοuseοut="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>" > 

转载于:https://my.oschina.net/mkh/blog/78490

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值