js table隔行变色

表格行背景色交替与鼠标悬停效果

最新推荐文章于 2022-12-27 13:57:25 发布

原创最新推荐文章于 2022-12-27 13:57:25 发布 · 340 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #html隔行变色

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现表格行背景颜色交替显示的方法，并为每行添加了鼠标悬停时背景色变化的效果。通过简单的代码片段，可以增强网页表格的视觉效果和用户体验。

var tb = document.getElementById('tabID');    // table 的 id
var rows = tb.rows;  //获取table的行
for(var i = 0; i<rows.length;i++){
    if(i%2 == 0){
        rows[i].style.backgroundColor="#ffcccc";
        //添加鼠标经过事件
        rows[i].onmouseover = function(){
            this.style.backgroundColor="#ccffff"
        }
        //添加鼠标离开事件
        rows[i].onmouseout = function(){
            this.style.backgroundColor="#ffcccc"
        }
    }else{
        rows[i].style.backgroundColor="#FFFFFF ";

        rows[i].onmouseover = function(){
            this.style.backgroundColor="#ccffff"
        }
        rows[i].onmouseout = function(){
            this.style.backgroundColor="#FFFFFF"
        }
    }
}