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

2018-01-30 08:18:40来源:cnblogs.com作者:兰亭序乱人点击

分享

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

第一种:
<style>
tr{bgColor:expression(
    this.bgColor=((this.rowIndex)%2==0 )? 'white' : 'yellow');
}
</style>
<table id="oTable" width="100" border="1">
<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">
<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 > 

附:

<script src="jquery-1.7.min.js"></script>
<script>
$(document).ready(function(){
SetTableRowColor();

});
//用CSS控制奇偶行的颜色
function SetTableRowColor()
{

$("#Table tr:odd").css("background-color", "#e6e6fa");
$("#Table tr:even").css("background-color", "#fff0fa");
}
</scirpt> 

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台