html+css+js的表格选中

最新推荐文章于 2022-10-12 22:56:42 发布

Lutrra

最新推荐文章于 2022-10-12 22:56:42 发布

阅读量212

点赞数

分类专栏：前端小东西文章标签： html css javascript

本文链接：https://blog.csdn.net/lutrra/article/details/121314669

版权

前端小东西专栏收录该内容

12 篇文章 1 订阅

订阅专栏

表格的选中

<!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>
        .single{
            background-color: rgb(76, 231, 172);
            font-size: 17px;
            color: white;
        }
        .double{
            background-color: rgb(17, 230, 148);
            font-size: 17px;
            color: white;
        }
        .highLight{
            background-color: rgb(13, 241, 192);
            font-size: 20px;
            color: white;
        }
        table{
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <table width="300" border="1" id="mytable">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>户籍</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>18</td>
            <td>河南</td>
        </tr>
        <tr>
            <td>张四</td>
            <td>19</td>
            <td>河北</td>
        </tr>
        <tr>
            <td>张五</td>
            <td>20</td>
            <td>湖南</td>
        </tr>
    </table>

    <script>
        var name;
        var table = document.getElementById("mytable");
        var rows = table.rows;
        for(var i=1;i<rows.length;i++)
        {
            if(i%2 == 0)
            {
                rows[i].className = "single";
            }
            else
            {
                rows[i].className = "double";
            }
            rows[i].onmouseover = function(){
                name = this.className;
                this.className = "highLight";
            }
            rows[i].onmouseout = function(){
                this.className = name;
            }
        }
    </script>
</body>
</html>

Lutrra

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html+css+js的表格选中

表格的选中<!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&
复制链接

扫一扫