js实现鼠标悬浮时表格对应行变色

最新推荐文章于 2024-01-06 15:06:54 发布

黄大仙No.1

最新推荐文章于 2024-01-06 15:06:54 发布

阅读量1.7k

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_44378358/article/details/107806633

版权

javascript 专栏收录该内容

104 篇文章 9 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        thead {
            background-color: #555555;
            color: green
        }

        tbody {
            background-color: #7cd1f9;
            color: blue;
            height: 50px
        }

        tfoot {
            background-color: #888888;
            color: red
        }

        .bg{
            background-color: pink;
        }
    </style>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>February</td>
        <td>$80</td>
    </tr>
    <tr>
        <td>February</td>
        <td>$80</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td>Sum</td>
        <td>$180</td>
    </tr>
    </tfoot>
</table>
<script>
    var trs=document.querySelector('tbody').querySelectorAll('tr');
    for (var i=0;i<trs.length;i++){
        trs[i].onmouseover=function () {
            console.log(1);
            this.className='bg';
        }
        trs[i].onmouseleave=function () {
            this.className='tbody';
        }
    }
</script>
</body>
</html>