T086学习网 | 站长学院 | 技术文档 | 成语 | 歇后语 | 帝国时代 | 代码收藏 | IP地址查询 | 生活百科 | 生日密码 | CSS压缩 | 用户评论 | 欣欣百宝箱

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

【 来源:wanghr100作者:佚名 更新时间:2005-12-27 | 字体:
[导读]这是继上一篇 expression的应用之 -- 用CSS做出立体表格 的又一篇小应用. 关于双色相间表格. 如果直接用Dreamweaver等工具做的话.要对每一行都进行设置. 如果行数一多话,工作量非常大...所以,结合CSS与javascrip...

这是继上一篇 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给你的网页减减肥吧..让你的网页的代码更精减更模块化.....

  • 转载请注明来源:IT学习网 网址:http://www.t086.com/ 向您的朋友推荐此文章
  • 特别声明: 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系我们,我们会尽快予以更正。
更多
留言建议ASP探针PHP探针站长Enjoy的Blog
© 2017 T086学习网 - T086.com(原itlearner.com)
RunTime:18.95ms QueryTime:7