zoukankan      html  css  js  c++  java
  • (转)用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="c:if test='${status.count%2==0}'>#FFFFFF</c:if><c:if test='${status.count%2!=0}'>#E6E6E6</c:if>" > 

    附:

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

  • 相关阅读:
    MAC下配置PHP环境详解, Apache,MySQL数据库,vim
    xib和storyboard小谈,
    iOS中block运用
    IOS-UIDynamic
    ProtocolBuffers-3 For Objective C (2)-进阶
    ProtocolBuffers-3 For Objective C (1)-简单的使用
    12. UITextField
    11. KVC And KVO
    10.OC中retainCount返回值不准的原因
    9. 了解 Cocoa-百度百科
  • 原文地址:https://www.cnblogs.com/qzj-it/p/8377519.html
Copyright © 2011-2022 走看看