用Javascript实现鼠标经过某一行,那一行变色

用Javascript实现鼠标经过某一行,那一行变色

正在学习大前端中,有代码和思路不规范不正确的地方往多多包涵,感谢指教


我们在浏览网页时,经常会遇见这种情况,就是有多行显示时,你的鼠标经过这些行,便会使这些行变成其他的颜色,离开了又变回原来的颜色,用来区分你现在鼠标所停留的是哪行。

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
     
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }
        thead tr{
     
            height: 30px;
            background-color: skyblue;
        }
        tbody tr{
     
            height: 30px;
        }
        tbody td{
     
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }
        .bg{
     
            background-color: pink;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>农银金惠3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003527</td>
                <td>啊实打实</td>
                <td>646</td>
                <td>324135</td>
                <td>654</td>
                <td>+0.030%</td>
            </tr>
            <tr>
                <td>003528</td>
                <td>啊实打实的</td>
                <td>56465</td>
                <td>653456</td>
                <td>6465</td>
                <td>+0.062%</td>
            </tr>
        </tbody>
    </table>
    <script>
        var trs=document.querySelector('tbody').querySelectorAll('tr')
        for (var i=0;i<trs.length;i++){
     
            trs[i].onmouseover=function () {
     
                this.className='bg'
            }
            trs[i].onmouseout=function () {
     
                this.className=''
            }
        }
    </script>
</body>
</html>

演示效果
未停留时:
用Javascript实现鼠标经过某一行,那一行变色_第1张图片


停留某一行时: ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210130234626180.png) ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210130234641587.png) ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210130234656146.png)

代码解释:

这里用到的就是onmouseover和onmouseout两个事件,当鼠标停留在第i行时时,触发onmouseover,使得这一行的classname变为我们规定的,在style里面已经设置好了样式。然后如果鼠标离开这一行触发onmouseout,使得classname变为空“”,使得这一行没有所对应的classname,就不修改,恢复到最开始的默认的设置。




别喷我,写的不好就劳烦指点一二,觉得有帮助就留下个大拇指点个关注再走哈哈哈!

你可能感兴趣的:(JS,javascript,css,html,html5)