expression的应用之 -- 用CSS做出双色相间表格

原创 2003年11月23日 19:19:00

这是继上一篇 expression的应用之 -- 用CSS做出立体表格.    的又一篇小应用.

关于双色相间表格. 如果直接用Dreamweaver等工具做的话.
要对每一行都进行设置. 如果行数一多话,工作量非常大...
所以,结合CSS与JavaScript我们自已定义双色相间表格样式.
这样,我们要使用的时候就非常方便啦..只要在整个表格加入一个class就行了.


<SCRIPT>

//定义table的样式, cellSpacing,cellPadding.
//用obj.rows.length得出该表格的行数.
//实现奇数列时样式为tdcss1,偶数列为tbcss2.

function cooltable(obj) {
obj.cellSpacing=0;
obj.cellPadding=0;
for  (i=0;i<obj.rows.length;i++)  { 
if(i%2==0) obj.rows(i).className  =  "tdcss1"
else obj.rows(i).className  =  "tdcss2"; 

}
</SCRIPT>

<!--定义样式-->

<STYLE>
* {font-size: 10.5pt}
.tdcss1  {  BACKGROUND-COLOR:  #F7F3F7; } 
.tdcss2  {  BACKGROUND-COLOR:  #FFF7FF; } 
.mytbcss {baobao:expression(cooltable(this))}
</STYLE> 

<BODY> 

<!--定义定义表格样式mytbcss就可以得到一个双色相间表格,再也不用一行一行地定义了.-->

<TABLE width=300  border=0 class=mytbcss> 
   <TR><TD>wanghr100</TD><TD>灰豆宝宝.net</TD></TR>  <!--定义样式tdcss1-->
   <TR><TD>wanghr100</TD><TD>灰豆宝宝.net</TD></TR>  <!--定义样式tdcss2-->
   <TR><TD>wanghr100</TD><TD>灰豆宝宝.net</TD></TR>  <!--定义样式tdcss1-->
   <TR><TD>wanghr100</TD><TD>灰豆宝宝.net</TD></TR>  <!--定义样式tdcss2-->
   <TR><TD>wanghr100</TD><TD>灰豆宝宝.net</TD></TR>  <!--定义样式tdcss1-->
   <TR><TD>wanghr100</TD><TD>灰豆宝宝.net</TD></TR>  <!--定义样式tdcss2-->
   <TR><TD>wanghr100</TD><TD>灰豆宝宝.net</TD></TR>  <!--定义样式tdcss1-->
</TABLE> 
</BODY> 


说明:


.tdcss1  {  BACKGROUND-COLOR:  #F7F3F7; } 
.tdcss2  {  BACKGROUND-COLOR:  #FFF7FF; } 
.mytbcss {baobao:expression(cooltable(this))}

.tdcss1.tdcss2 这两个是定义列的样式.
当然,你可以自己做得更酷一些啦..
baobao 是自已定义的属性,你任意取个名字,用你的英文名...因为这是你自己的CSS啊.

expression()里面的语句就是JavaScript. 一定很熟悉吧..
cooltable(this)调用了前面我们写的函数.

  这文章只是expression的一个小应用.看了这文章后,不知道有没有什么启发.
用expression给你的网页减减肥吧..让你的网页的代码更精减更模块化.....

第100章、WebView应用之Javascript调用Android(从零开始学Android)

在某些Android应用中,使用Javascript调用Android中的方法也是会用到的。   (1)用WebView来显示HTML代码;   (2)允许WebView执行JavaScript ...
  • jianghuiquan
  • jianghuiquan
  • 2013年03月18日 14:37
  • 3488

奇偶行显示不同样式操作,CSS3 :nth-child()伪类选择器

原文地址:http://blog.phpok.com/archives/202/ css3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支...
  • l863784757
  • l863784757
  • 2013年11月04日 16:22
  • 2613

CSS expression属性实现javascript与CSS完美结合

本文向大家描述一下CSS expression属性如何将javascript与CSS结合起来,CSS中使用expression可以把CSS属性和Javas cript表达式关联起来,也就是说CSS属性...
  • gigizhui
  • gigizhui
  • 2015年09月16日 09:58
  • 428

C# 系统应用之鼠标模拟技术及自动操作鼠标

游戏程序的操作不外乎两种——键盘输入控制和鼠标输入控制,几乎所有游戏中都使用鼠标来改变角色的位置和方向,本文主要是讲述如何使用C#调用Windows API函数实现鼠标模拟操作的功能.首先通过结合Fi...
  • Eastmount
  • Eastmount
  • 2014年10月13日 20:04
  • 5801

jQuery制作双色表格

Insert title here $(document).ready(function(){ $(".stripe tr").mouseover(function(){ $(this).a...
  • z83986976
  • z83986976
  • 2014年08月26日 23:33
  • 485

《Node.js实战(双色)》作者之一——吴中骅访谈录

1 请和大家介绍下您及所从事的工作。 我目前在苏州唐人数码工作,是一家本地的网络游戏公司,主要经营棋牌游戏,最近自主研发了一款3D的网路游戏——争渡三国,我在公司负责游戏平台工作,对公司自营的游戏以...
  • broadview2006
  • broadview2006
  • 2014年05月14日 09:24
  • 4059

Arduino学习(四) 双色LED实验

双色LED是一种可以显示二色颜色的LED灯,  可以有三种状态:  灭,  颜色1亮, 颜色2亮 .  根据颜色组合的不同,  分为红蓝双色,  黄蓝双色, 红绿双色等等. 双色LED是一种常用的L...
  • c80486
  • c80486
  • 2016年09月23日 00:01
  • 2393

南邮 OJ 1217 双色Hanoi塔问题

双色Hanoi塔问题 时间限制(普通/Java) : 1000 MS/ 3000 MS          运行内存限制 : 65536 KByte 总提交 : 58            测试...
  • changshu1
  • changshu1
  • 2015年08月05日 11:10
  • 578

栈的应用——表达式求值

栈的应用——表达式求值  栈在数据结构中应用非常广泛,表达式求值就是最典型的例子之一。 1、        “表达式”  =  “第一操作数”  +  “运算符”  +  “第二操作数”   ...
  • K_zer0
  • K_zer0
  • 2017年02月07日 14:37
  • 239

机器学习系列(3)_逻辑回归应用之Kaggle泰坦尼克之灾

Kaggle上的大神们,也分享过一些experience,说几条我记得的哈: 『对数据的认识太重要了!』 『数据中的特殊点/离群点的分析和处理太重要了!』 『特征工程(feature enginee...
  • longxinchen_ml
  • longxinchen_ml
  • 2015年11月12日 13:52
  • 10590
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:expression的应用之 -- 用CSS做出双色相间表格
举报原因:
原因补充:

(最多只允许输入30个字)