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

王朝html/css/js·作者佚名  2006-01-08
窄屏简体版  字體: |||超大  

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有  導航