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

闵开慧

发布于 2018-03-30 12:21:01

3.6K0

发布于 2018-03-30 12:21:01

文章被收录于专栏：闵开慧

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

express