隔行变色的表格（altColorTable）

最新推荐文章于 2022-02-16 17:09:43 发布

原创最新推荐文章于 2022-02-16 17:09:43 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #javascript #behavior #table #html #null

WEB开发技巧专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一个HTC文件如何通过JavaScript实现HTML表格中行的颜色交替显示，并且为鼠标悬停状态提供了不同的背景色变化。代码示例展示了如何在不同事件下更改表格行的样式，包括初始化时为表格头设置特定样式。

alterColorTable.htc:

<public:attach event="onmouseover" onevent="onMouseOver()"/>
<public:attach event="onmouseout" onevent="onMouseOut()"/>
<public:attach event="oncontentready" onevent="alterColor()"/>

alterColorTable.htm:

<html>
<head>
<title></title>
<style>
.table-head{
     background-color: #88DDEE
}
.lightTR{
     background-color: #EEFFFF
}
.darkTR{
     background-color: #CCEEDD
}
.overTR{
     background-color: #0077AA;
     cursor:hand;
}
TR{
    behavior:url(altColorTable.htc);
}
</style>
</head>
<body>
<table>
<tr><td>标题列</td><td>标题列</td></tr>
<tr><td>浅色</td><td>浅色</td></tr>
<tr><td>深色</td><td>深色</td></tr>
<tr><td>浅色</td><td>浅色</td></tr>
<tr><td>深色</td><td>深色</td></tr>
<tr><td>浅色</td><td>浅色</td></tr>
<tr><td>深色</td><td>深色</td></tr>
<tr><td>浅色</td><td>浅色</td></tr>
<tr><td>深色</td><td>深色</td></tr>
</table>
</body>
</html>