JS表格隔行变色

最新推荐文章于 2024-07-05 16:41:23 发布

一夕ξ

最新推荐文章于 2024-07-05 16:41:23 发布

阅读量468

点赞数

分类专栏：前端学习文章标签： javascript 前端 ecmascript

本文链接：https://blog.csdn.net/qq_45387575/article/details/123034681

版权

前端学习专栏收录该内容

77 篇文章 6 订阅

订阅专栏

1、鼠标事件经过onmouseover,鼠标离开onmouseout

2、鼠标经过，当前行高亮，鼠标离开，当前行背景变灰

3、第一行不变。thead。tbody

注意必须使用this来指代才有效果

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

<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 {
            width: 405px;
            margin: 0 auto;
            margin-top: 20px;
            /* border-spacing: 0px; */
            border-collapse: collapse;
            text-align: center;
        }
        
        table thead {
            color: blue;
            background-color: skyblue;
            padding-right: 10px
        }
        
        .tu a {
            width: 13px;
            height: 16px
        }
        
        .tu img {
            width: 13px;
            height: 13px
        }
        
        tr {
            border: 1px solid grey;
            border-left: 0px;
            border-right: 0px;
        }
        
        a {
            text-decoration: none;
        }
        
        a:hover {
            text-decoration: underline
        }
        
        .bg {
            background-color: blue;
        }
    </style>
</head>

<body>

    <table>
        <thead>
            <td>代码</td>
            <td>名称</td>
            <td>最新价</td>
            <td>股吧</td>
        </thead>
        <tbody>
            <tr>
                <td><a href="">04338</a></td>
                <td><a href="">微软-T</a></td>
                <td>1600.00</td>
                <td>
                    <a href=""><img src="linkto_ba.gif" alt=""></a>
                </td>
            </tr>
            <tr>
                <td><a href="">04338</a></td>
                <td><a href="">微软-T</a></td>
                <td>1600.00</td>
                <td class="tu">
                    <a href=""><img src="linkto_ba.gif" alt=""></a>
                </td>
            </tr>
            <tr>
                <td><a href="">04338</a></td>
                <td><a href="">微软-T</a></td>
                <td>1600.00</td>
                <td>
                    <a href=""><img src="linkto_ba.gif" alt=""></a>
                </td>
            </tr>
        </tbody>

    </table>
    <script>
        var tr = document.querySelector('tbody').querySelectorAll('tr')
        console.log(tr)

        //注册事件 利用循环
        for (var i = 0; i < tr.length; i++) {
            tr[i].onmouseover = function() {
                console.log('11')
                this.className = 'bg'
            }
            tr[i].onmouseout = function() {
                this.className = ''
            }
        }
    </script>
</body>

</html>

thead与tbody分离

一夕ξ

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS表格隔行变色

1、鼠标事件经过onmouseover,鼠标离开onmouseout2、鼠标经过，当前行高亮，鼠标离开，当前行背景变灰3、第一行不变。thead。tbody注意必须使用this来指代才有效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=..
复制链接

扫一扫