表格隔行变色2020/11/21

最新推荐文章于 2023-11-19 11:09:06 发布

【5】吴润泽

最新推荐文章于 2023-11-19 11:09:06 发布

阅读量603

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/weixin_50286102/article/details/109895372

版权

这篇博客介绍了如何利用JavaScript实现表格的隔行变色效果。通过onmouseover和onmouseout事件监听鼠标行为，结合表格元素和，在用户鼠标经过时改变行的样式，实现交互式表格设计。

摘要由CSDN通过智能技术生成

onmouseover:鼠标经过事件
onmouseout:鼠标离开事件
元素定义了一个包含数据的表格单元格
代表行

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</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

最低0.47元/天解锁文章

【5】吴润泽

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
表格隔行变色2020/11/21

onmouseover:鼠标经过事件onmouseout:鼠标离开事件元素定义了一个包含数据的表格单元格代表行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht.
复制链接

扫一扫