现在的位置: 首页 > 综合 > 正文

css控制表格交替颜色

2012年08月19日 ⁄ 综合 ⁄ 共 1277字 ⁄ 字号 评论关闭
奇妙的样式表语法
 <style type="text/css">
 
<!--
 tr 
{background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")}
 td 
{background-color:expression((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:expression((this.rowIndex%2==0)?"blue":"red");ryo:expression(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>&nbsp;</TD>
</TR>
<TR>
<TD>&nbsp;</TD>
</TR>
<TR>
<TD>&nbsp;</TD>
</TR>
<TR>
<TD>&nbsp;</TD>
</TR>
<TR>
<TD>&nbsp;</TD>
</TR>
<TR>
<TD>&nbsp;</TD>
</TR>
<TR>
<TD>&nbsp;</TD>
</TR>
<TR>
<TD>&nbsp;</TD>
</TR>
</TABLE>

抱歉!评论已关闭.