【表格隔行变色效果--JavaScript】

最新推荐文章于 2024-11-09 19:20:14 发布

王猫粮

最新推荐文章于 2024-11-09 19:20:14 发布

阅读量93

点赞数

文章标签： css html 数学建模

本文链接：https://blog.csdn.net/m0_70684059/article/details/131011125

版权

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border-collapse: collapse;
        }
        table tr td{
            width: 100px;
        }
        thead tr{
            background-color: skyblue;
            text-align: center;
            border-bottom: 1px solid #123456;
        }
        tbody tr{
            text-align: center;
            border-bottom: 1px solid #123456;
        }
        .bg{
            background-color: pink;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <td>代码</td>
                <td>名称</td>
                <td>最新公布值</td>
                <td>累计净值</td>
                <td>前单位净值</td>
                <td>净值增长率</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>00345</td>
                <td>国开行银行</td>
                <td>1.245</td>
                <td>1.025</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>00346</td>
                <td>农业银行</td>
                <td>1.545</td>
                <td>1.525</td>
                <td>1.464</td>
                <td>+0.052%</td>
            </tr>
            <tr>
                <td>00347</td>
                <td>行政行银行</td>
                <td>1.545</td>
                <td>1.765</td>
                <td>1.254</td>
                <td>+0.257%</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>

应用场景：鼠标移上去会变色，离开恢复原样