js实现表单隔行变色效果

立志成为有钱人

于 2024-07-19 15:50:41 发布

阅读量209

点赞数 2

文章标签： html5 javascript css

本文链接：https://blog.csdn.net/2301_79605560/article/details/140551887

版权

当鼠标经过的时候，底色变化，鼠标离开的时候，底色恢复，只是一个简单的实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table width="800px" height="400px" border="1" cellspacing="0" cellpadding="0">
        <tr>
            <td>代码</td>
            <td>净值</td>
            <td>净增长值</td>
        </tr>
        <tr>
            <td>003562</td>
            <td>1.079</td>
            <td>+0.047%</td>
        </tr>
        <tr>
            <td>003526</td>
            <td>1.079</td>
            <td>+0.047%</td>
        </tr>
    </table>
    <script>
        var trs = document.querySelectorAll("tr");
        for (var i = 0; i < trs.length; i++) {
            trs[i].onmouseover = function () {

                this.style.backgroundColor = 'blue';
            }

            trs[i].onmouseout = function () {
                this.style.backgroundColor = '';

            }

        }
    </script>
</body>

</html>

document.querySelectorAll要和数组搭配来使用

运行如下：