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> 

  • 相关阅读:
    黄聪:C#中CefSharp的简单使用
    ArcGIS Pro关闭窗口和退出
    AddOverlay
    ArcGIS Pro固定纸张限定比例尺自动调整纵横打印
    ArcGIS pro增加一个独立表到地图
    ArcGIS Pro How to remove standalone table from contents
    ArcGIS Pro的进度条
    CreatePolygonGraphicElement
    Creating a Group with a List of Elements
    ArcGISPro理解多线程
  • 原文地址:https://www.cnblogs.com/qzj-it/p/8377519.html
Copyright © 2011-2022 走看看