繁体中文
设为首页
加入收藏
资讯中心
网络编程
数据库
脚本专栏
实用技巧
软件编程
网页制作
操作系统
经典网摘
网站技巧
免费资源
关于我们
文章搜索
主机租用
域名查询
AJAX相关
JavaScript
ASP编程
ASP.NET
正则表达式
CSS/HTML
PHP编程
JSP编程
编程10000问
脚本加解密
web2.0
XML/RSS
网页编辑器
相关技巧
黑客相关
网页播放器
其它综合
页面导航：
首页
→
网络编程
→
CSS/HTML
→ 正文内容
表格隔行换色 css expression
发布：dxy 字体：[
增加
减小
] 类型：转载
第一行为其它颜色，这样写这个表达式
点击运行可以看到效果:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>表格CSS测试</title> <style type="text/css"> <!-- tr { background-color: expression(this.sectionRowIndex==0?"#AFAFAF":((this.sectionRowIndex%2==0) ? "#FFF0F0" : "#F0F0FF")); } --> </style> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0"> <table cellspacing="1"> <tr> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> </tr> <tr> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> </tr> <tr> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> </tr> <tr> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> </tr> <tr> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> </tr> <tr> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> </tr> </table> <table cellspacing="1"> <tr> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> </tr> <tr> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> </tr> <tr> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> </tr> <tr> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> </tr> <tr> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> </tr> <tr> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> </tr> <tr> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> </tr> <tr> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> </tr> <tr> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> </tr> <tr> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> </tr> <tr> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> </tr> <tr> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> </tr> <tr> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> </tr> <tr> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> </tr> <tr> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> </tr> <tr> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> <td width="50"> </td> </tr> </table> </body> </html>
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
比较强的css
点击运行可以看到效果:
<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 ) } .FindAreaTable { font-size: 12px; color: #333333; text-decoration: none; width: 1024px; cursor: hand; background-color: #FFFFFF; vertical-align: middle; text-align: center; } --> </style> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0"> <table cellspacing="1" class="FindAreaTable" ID="DataGrid1"> <tr> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> </tr> <tr> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> </tr> <tr> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> </tr> <tr> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> </tr> <tr> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> </tr> <tr> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> </tr> <tr> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> </tr> <tr> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> </tr> <tr> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> </tr> <tr> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> </tr> <tr> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> </tr> <tr> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> </tr> <tr> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> </tr> <tr> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> </tr> <tr> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> <td>表格测试</td> </tr> </table> </body> </html>
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
Tags：
css
expression
百度中搜索更多的关于
表格隔行换色 css expression
内容，或者
用Google搜索相关更多
浏览次数：
载入中...
打印本文
关闭本文
文章来源
0
顶一下
上一篇文章：
解决input对齐问题vertical-alige
下一篇文章：
html在线编辑器的更新[2006-05]
文章评论
共有
位脚本之家网友发表了评论
我来说两句
同 类 文 章
非常酷的角BANNER
CSS 实用实例(推荐)
CSS布局入门
CSS 中关于字体处理效果的思考
静态页面加密
Mozilla建议的CSS书写顺序
标准化你的网页
div＋css布局入门
CSS如何使DIV层居中
最基本的几种CSS文字滤镜效果
最 近 更 新
CSS：自定多姿多彩的网页链接下划线
不用float实现模块居中布局
如何以及何时使用sIFR
保存几个不错的css特效字
闭合浮动元素超级简单的方法
word-wrap
块元素block element和内联元素inline el
CSS图片翻转菜单
图片翻转菜单技术研究
典型的三行二列居中高度自适应布局
热 点 排 行
用DIV+CSS如何实现这种表格效果
文字或图片元素在DIV中垂直居中
用js控制css的不错的方法
给图片加阴影效果的CSS
div+css排版的样例
如何设置网页的背景为透明
DIV_圆边圆角的实现
130个漂亮CSS布局站点参考
表格隔行换色 css expression
firefox样式表定义不支持cursor:
文章评论
共有 位脚本之家网友发表了评论我来说两句