table行间隔交换颜色显示方法

最新推荐文章于 2024-07-12 18:29:20 发布

转载最新推荐文章于 2024-07-12 18:29:20 发布 · 2.1k 阅读

文章标签：

#table #behavior #border #function #url #class

CSS+DIV 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用HTC组件为HTML表格添加交互样式的方法。通过JavaScript实现表格行的背景颜色交替显示，并利用鼠标悬停效果改变背景色。此方案适用于旧版IE浏览器，展示了如何结合HTC和内联样式实现统一的视觉效果。

一个例子：

<html> <head> <mce:style></mce:style><style mce_bogus="1"> .table1 { behavior:url(table.htc); }</style> </head> <body> <table class="table1" border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" mce_style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1"> <tr onmouseover="this.style.backgroundColor='#F4F9FD'" onmouseout="this.style.backgroundColor='#FFFFFF'"> <td width="25%">　</td> <td width="25%">　</td> <td width="25%">　</td> <td width="25%">　</td> </tr> <tr onmouseover="this.style.backgroundColor='#F4F9FD'" onmouseout="this.style.backgroundColor='#FFFFFF'"> <td width="25%">　</td> <td width="25%">　</td> <td width="25%">　</td> <td width="25%">　</td> </tr> <tr onmouseover="this.style.backgroundColor='#F4F9FD'" onmouseout="this.style.backgroundColor='#FFFFFF'"> <td width="25%">　</td> <td width="25%">　</td> <td width="25%">　</td> <td width="25%">　</td> </tr> <tr onmouseover="this.style.backgroundColor='#F4F9FD'" onmouseout="this.style.backgroundColor='#FFFFFF'"> <td width="25%">　</td> <td width="25%">　</td> <td width="25%">　</td> <td width="25%">　</td> </tr> <tr onmouseover="this.style.backgroundColor='#F4F9FD'" onmouseout="this.style.backgroundColor='#FFFFFF'"> <td width="25%">　</td> <td width="25%">　</td> <td width="25%">　</td> <td width="25%">　</td> </tr> <tr onmouseover="this.style.backgroundColor='#F4F9FD'" onmouseout="this.style.backgroundColor='#FFFFFF'"> <td width="25%">　</td> <td width="25%">　</td> <td width="25%">　</td> <td width="25%">　</td> </tr> <tr onmouseover="this.style.backgroundColor='#F4F9FD'" onmouseout="this.style.backgroundColor='#FFFFFF'"> <td width="25%">　</td> <td width="25%">　</td> <td width="25%">　</td> <td width="25%">　</td> </tr> <tr onmouseover="this.style.backgroundColor='#F4F9FD'" onmouseout="this.style.backgroundColor='#FFFFFF'"> <td width="25%">　</td> <td width="25%">　</td> <td width="25%">　</td> <td width="25%">　</td> </tr> </table> </body> </html>

需要引入的*.htc文件

<PUBLIC:COMPONENT>
<public:attach event="oncontentready" onevent="Init()" />
<SCRIPT language="JScript">

function Init()
{
           for(i=0;i<element.rows.length;i++){
                       if(i%2==0)
                                   element.rows(i).style.backgroundColor = "#eeeeee";
                       else
                                   element.rows(i).style.backgroundColor = "#ffffff";
           }

}
</SCRIPT>

</PUBLIC:COMPONENT>