HTML/CSS 订阅所有【HTML/CSS】的日志

CSS控制表格的交替颜色三例

编辑:dnawo 日期:2007-12-21

字体大小: 小 中 大
复制内容到剪贴板程序代码 程序代码
<style type="text/css">
<!--
tr {background-color:e­xpression((this.sectionRowIndex%2==0)?"red":"blue")}
-->
</style>
</HEAD>
<table>
<tr><td>第1行</td><td>第1行</td></tr>
<tr><td>第2行</td><td>第2行</td></tr>
<tr><td>第3行</td><td>第3行</td></tr>
<tr><td>第4行</td><td>第4行</td></tr>
<tr><td>第5行</td><td>第5行</td></tr>
</table>
//myhyli @ blueidea

复制内容到剪贴板程序代码 程序代码
<style type="text/css">
<!--
tr {background-color:e­xpression((this.sectionRowIndex%2==0)?"red":"blue")}
td {background-color:e­xpression((this.cellIndex%2==0)?"":((this.parentElement.sectionRowIndex%2==0)?"green":"yellow"))}
-->
</style>
</HEAD>
<table>
<tr><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></tr>
<tr><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></tr>
<tr><td>第5行</td><td>第5行</td><td>第5行</td><td>第5行</td><td>第5行</td></tr>
</table>
//myhyli @ blueidea

复制内容到剪贴板程序代码 程序代码
<style>
tr{background-color:e­xpression((this.rowIndex%2==0)?"blue":"red");ryo:e­xpression(onmouseover=function(){this.style.backgroundColor=(this.style.backgroundColor!='gray'?'gray':((this.rowIndex%2==0)?"blue":"red"))},onmouseout=function(){this.style.backgroundColor=(this.style.backgroundColor!='gray'?'gray':((this.rowIndex%2==0)?"blue":"red"))})}
</style>
<TABLE width="200" cellpadding="0" cellspacing="2" border="0" id="t1">
<TR>
<TD>111</TD>
</TR>
<TR>
<TD>222</TD>
</TR>
<TR>
<TD>333</TD>
</TR>
<TR>
<TD>444</TD>
</TR>
<TR>
<TD>555</TD>
</TR>
<TR>
<TD>666</TD>
</TR>
<TR>
<TD>777</TD>
</TR>
<TR>
<TD>888</TD>
</TR>
</TABLE>


上一篇: 根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
下一篇: 一行代码杜绝iframe挂马
文章来自: 51js.com
引用通告: 查看所有引用 | 我要引用此文章
Tags:
最新日志:
评论: 0 | 引用: 0 | 查看次数: 4593
发表评论
请登录后再发表评论！