表格隔行变色

最新推荐文章于 2021-08-25 13:00:02 发布

weixin_30553837

最新推荐文章于 2021-08-25 13:00:02 发布

阅读量112

点赞数

原文链接：http://www.cnblogs.com/Jianxq12/p/7684316.html

版权

表格隔行变色

需求：设置表格隔行背景色一样，且鼠标悬停任意一行时，该行高亮显示为另一种背景色，鼠标离开该行，则显示回初始背景色。

获取所有行元素tr，声明变量oldColor用以保存初始背景色
for循环给每行设置初始背景色，并绑定鼠标悬停事件和鼠标离开事件。
循环体内，if语句判断奇偶行，添加初始背景色
各行绑定鼠标悬停事件，驱动程序函数体里，首先将if语句里添加好的初始背景色赋值给变量oldColor，然后给调用函数的当前行，添加高亮色。

各行绑定鼠标离开事件，驱动程序函数体里，将oldColor赋值给调用函数的当前行，背景色由高亮色改为原色。

   <body>
   <div class="wrap">
<table>
    <thead>
    <tr ...>
    </thead>
    <tbody id="j_tb">
    <tr...>
    <tr...>
    <tr...>
    <tr...>
    <tr...> 
    </tbody>
</table>
   </div>
   <script>
var trs = document.getElementById("j_tb").getElementsByTagName("tr");
var oldColor;

for (var i = 0; i < trs.length; i++) {
    if (i % 2 == 0) {
        trs[i].style.backgroundColor = "#eee";
    } else {
        trs[i].style.backgroundColor = "#fff";
    }
    trs[i].onmouseover = function () {
        oldColor = this.style.backgroundColor;
        this.style.backgroundColor = "skyblue";
    }
    trs[i].onmouseout = function () {
        this.style.backgroundColor = oldColor;
    }
}
   </script>
   </body>

转载于:https://www.cnblogs.com/Jianxq12/p/7684316.html

weixin_30553837

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表格隔行变色

表格隔行变色需求：设置表格隔行背景色一样，且鼠标悬停任意一行时，该行高亮显示为另一种背景色，鼠标离开该行，则显示回初始背景色。获取所有行元素tr，声明变量oldColor用以保存初始背景色for循环给每行设置初始背景色，并绑定鼠标悬停事件和鼠标离开事件。循环体内，if语句判断奇偶行，添加初始背景色各行绑定鼠标悬停事件，驱动程序函数体里，首先将if语...
复制链接

扫一扫