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

本文主要是介绍用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" ο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>" >

这篇关于用JS实现表格中隔行显示不同颜色的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---