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> 

  • 相关阅读:
    算法的时间复杂度
    二叉树递归建立和遍历
    数据挖掘之分类算法---knn算法(有matlab例子)
    C链表之创建简单静态链表
    ID3决策树算法原理及C++实现(其中代码转自别人的博客)
    adobe reader安装完成之前被中断,错误代码150210解决方法
    Oracle性能诊断艺术-读书笔记
    先对结果集排序然后做update、delete操作
    索引聚簇因子相关
    直方图及low_value、high_value
  • 原文地址:https://www.cnblogs.com/qzj-it/p/8377519.html
Copyright © 2011-2022 走看看