<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>双色表格CSS实例</title>
<style type="text/css">
#DataGrid1 tr {
    background-color: expression(
        this.sectionRowIndex == 0 ? "#FFCCCC" :
        (
            (this.sectionRowIndex % 2 == 0) ? "#FFF0F0" : "#F0F0FF"
        )
    );
    color: expression(this.sectionRowIndex == 0 ? "#FFFFFF" : "");
    font-weight: expression(this.sectionRowIndex == 0 ? "BOLD" : "");
    TableSelect: expression(
        this.sectionRowIndex == 0 ? "" :
        (
            onmouseover = function()
            {
                this.style.backgroundColor =
                (
                    this.style.backgroundColor != "#69cdff" ? "#69cdff" :
                    (
                        this.sectionRowIndex == 0 ? "#FFCCCC" :
                        (
                            this.sectionRowIndex % 2 == 0 ? "#FFF0F0" : "#F0F0FF"
                        )
                    )
                )
            },
            onmouseout = function()
            {
                this.style.backgroundColor =
                (
                    this.style.backgroundColor != "#69cdff" ? "#69cdff" :
                    (
                        this.sectionRowIndex == 0 ? "#FFCCCC" :
                        (
                            this.sectionRowIndex % 2 == 0 ? "#FFF0F0" : "#F0F0FF"
                        )
                    )
                )
            }
        )
    )
}
#DataGrid1 td {
    background-color:expression(
        this.cellIndex == 0 ?
        (
            this.parentElement.sectionRowIndex == 0 ? "#FFCCCC" : "#DDDDDD"
        )
        : null
    )
}
.FindAreaTable1 {
    font-size: 12px;
    color: #333333;
    text-decoration: none;
    width: 400px;
    cursor: hand;
    background-color: #FFFFFF;
    vertical-align: middle;
    text-align: center;
}
</style>
</head>
<body>
<table cellspacing="1" class="FindAreaTable1" ID="DataGrid1">
  <tr>
    <td>首行首列</td>
    <td>首行</td>
    <td>首行</td>
    <td>首行</td>
    <td>首行</td>
    <td>首行</td>
  </tr>
  <tr>
    <td>行1首列</td>
    <td>行1</td>
    <td>行1</td>
    <td>行1</td>
    <td>行1</td>
    <td>行1</td>
  </tr>
  <tr>
    <td>行2首列</td>
    <td>行2</td>
    <td>行2</td>
    <td>行2</td>
    <td>行2</td>
    <td>行2</td>
  </tr>
  <tr>
    <td>行3首列</td>
    <td>行3</td>
    <td>行3</td>
    <td>行3</td>
    <td>行3</td>
    <td>行3</td>
  </tr>
  <tr>
    <td>行4首列</td>
    <td>行4</td>
    <td>行4</td>
    <td>行4</td>
    <td>行4</td>
    <td>行4</td>
  </tr>
  <tr>
    <td>行5首列</td>
    <td>行5</td>
    <td>行5</td>
    <td>行5</td>
    <td>行5</td>
    <td>行5</td>
  </tr>
</table>
</body>
</html>
另外,我 以前还看到过另外几种简单的方式,等以后有空再把它们找回来。

转载于:https://www.cnblogs.com/javaEEspring/archive/2007/10/06/2522951.html

网上找到一个用不同颜色显示表格奇偶行的例子相关推荐

  1. php表单偶数变颜色,利用CSS3 nth-child()选择器 实现表格奇偶行变色

    nth-child()简介 CSS3的nth-child() 选择器,我之前很少用,在做表格偶数行变色的时候,我通常在绑定的时候,做一个js判断,来加一个css,从而使表格偶数行和奇数行颜色不一样.这 ...

  2. 网上找到一个可以用来测试网站安全性能的测试ASP页面

    之前在找到一个验证自己网站安全性能的ASP检查页面 而现在大多数人用它来做ASP挂马程序使用  这儿把代码贴出来 有兴趣的朋友可以看看 毕竟知己知彼才能更好去防范控制 这儿贴出代码希望不要被用在恶意方 ...

  3. CSS3的nth-child() 选择器,表格奇偶行变色

    nth-child() 应用背景 CSS3的nth-child() 选择器,我之前很少用,在做表格偶数行变色的时候,我通常在绑定的时候,做一个js判断,来加一个css,从而使表格偶数行和奇数行颜色不一 ...

  4. 在网上找到一个CSS hack列表,记录在这里以分析css的浏览器兼容性

    另外摘抄一份目前的css浏览器兼容问题汇总,记录在这里自己好好学习一下 CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的 ...

  5. NodeJs教程(介绍总结!)终于在网上找到一个靠谱点的了T_T

    本人吐槽!本人是学渣,然后网上关于nodeJS的大多都是坑,简直让人要奔溃了.若非最近总是被要求要nodeJS,坚决不会去碰的...天生对cmd命令觉得无比的高大上,尽管一直在用git版本控制器!然后 ...

  6. 从网上找到一个清晰CSS视频教程和大家分享一下

    http://www.cnblogs.com/yaotong/archive/2008/04/22/1165275.html 转载于:https://www.cnblogs.com/smallfa/a ...

  7. Vue经典实例之table表格奇偶行不同颜色、鼠标移入变色、点击变色,一看就明白

    最主要就是用到属性的绑定 :class (动态绑定多个class) :class="[(k+1)%2==1?'trclock':'',curId==k?'trhover':'',select ...

  8. 如何在网上找到并下载你想要的软件

    此文谨献给那些还不会熟练的在网上找到正确软件并下载的人. 好像对于好多人来说从网上找到一个非假冒非病毒木马之类的软件还是有点困难.我今天简单的吧方法介绍一下,主要为了我可爱的学弟学妹们别再为这些小事烦 ...

  9. 找到一个PR2018CC中文PJ版

    分享:前几天为了视频剪辑从网上找到一个亲试可用的PR2018CC中文PJ版. 下载地址: 链接: https://pan.baidu.com/s/1XM0OV1rDLpBjtwVul6O5pg 提取码 ...

最新文章

  1. linux环境下nacos的安装+启动,阿里云服务器安装nacos
  2. Cookie 位置_无需整理
  3. 整理一套pandas详细教程,希望对你有帮助!
  4. 假设检验 Hypothesis testing
  5. Angular自学笔记(?)TemplateRef和ViewContainerRef
  6. 程序员内功修炼系列:10 张图解谈 Linux 物理内存和虚拟内存
  7. iOS高仿微信悬浮窗、忍者小猪游戏、音乐播放器、支付宝、今日头条布局滚动效果等源码...
  8. 数据分析学习笔记—python函数、异常与处理
  9. 最新 Bitnami redmine安装与配置
  10. 3DMAX导出网格顶点切向量
  11. Linux 服务器配置 ASF 云挂卡
  12. 做IT精英还是IT民工? 从事IT只是个体力活
  13. NVIDIA发布移动超级计算机“Jetson TK1”性能超树莓派
  14. 再肝一个R包!一行代码绘制精美火山图!
  15. 2017北京大学可视化发展前沿研究生暑期学校总结
  16. C++,Linux架构师成长之路
  17. 浪潮服务器bios怎么找回密码,服务器BIOS密码丢失解决方法
  18. linux蓝牙传送的文件存放,嵌入式蓝牙文件传送方案的实现
  19. [转]Unicode 汉字数据库
  20. 小巧精致的“隐形”耳机,让你排除干扰安心入眠,Wedoking 二代 无线睡眠耳机上手

热门文章

  1. 2016年软考网络工程师考试命题范围变化之网络设备配置与复习技巧
  2. eclipse 切换svn账号
  3. Web 开发中很实用的10个效果【附源码下载】
  4. 看了SUMTEC的稍微思考了一下…… 感触颇深。讲一件身边的事:
  5. python教学研究_Python程序设计课程教学研究
  6. 【转载】回归模型的评价指标
  7. Django中过滤的实现
  8. javascript中变量
  9. SprimgMVC学习笔记(十)—— 拦截器
  10. ubuntu16.04装机:网易云+搜狗拼音+chrome+uGet+caffe(openCV3.1+CUDA+cuDNN+python)