Js高级隔行变色

最新推荐文章于 2021-11-09 14:49:55 发布

zuo_zuo_blog

最新推荐文章于 2021-11-09 14:49:55 发布

阅读量151

点赞数 1

分类专栏：ＪａｖａＳｃｒｉｐｔ

本文链接：https://blog.csdn.net/zuo_zuo_blog/article/details/89075147

版权

ＪａｖａＳｃｒｉｐｔ专栏收录该内容

105 篇文章 2 订阅

订阅专栏

功能（隔行变色，鼠标滑过变白，划出恢复原色）
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap{
            text-align: center;
            position: absolute;
            top:200px;
            left: 550px;
        }
        tbody tr{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <table border="1">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>课程</th>
                    <th>成绩</th>
                </tr>
            </thead>
            <tbody id="target">
                <tr>
                    <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>
                </tr>
                <tr>
                    <td>3</td>
                    <td>3</td>
                    <td>3</td>
                    <td>3</td>
                </tr>
            </tbody>
        </table>
    </div>
<script>
    var tbody=document.getElementById("target");
    var trArr=tbody.children;
    for(var i=0;i<trArr.length;i++){
        if(i%2===0){
            trArr[i].style.backgroundColor="blue";
        }else{
            trArr[i].style.backgroundColor="red";
        }
        //鼠标滑过变白色（难点：鼠标移开的时候要复原颜色）计数器
        var color="";
        trArr[i].function () {
            color=this.style.backgroundColor;
            this.style.backgroundColor="#fff";
        }
        trArr[i].function () {
            this.style.backgroundColor=color;
        }
    }
</script>
</body>
</html>

zuo_zuo_blog

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js高级隔行变色

功能（隔行变色，鼠标滑过变白，划出恢复原色）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .wrap{ tex...
复制链接

扫一扫