木子屋
 

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

作者: dnawo

日期: 2007-12-21 02:11 PM

分类: HTML/CSS

内容: 复制内容到剪贴板 程序代码<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>

+ 查看当前日志评论 (0)

 

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.031 ms

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

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.031 ms

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.031 ms