Web API 排他操作案例 —— 表格隔行变色

最新推荐文章于 2022-10-03 19:46:52 发布

没人回复我哼

最新推荐文章于 2022-10-03 19:46:52 发布

阅读量285

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/qq_45645902/article/details/105596392

版权

本文通过实例讲解如何利用JavaScript的onmouseover和onmouseout事件实现Web API中表格的隔行变色效果。在鼠标经过tbody内的tr行时，该行背景色会改变，鼠标离开时恢复原状。注意thead中的行不参与变色处理。

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

学习来源：https://www.bilibili.com/video/BV1HJ41147DG

在这里插入图片描述
思路

用到新的鼠标事件鼠标经过 onmouseover、鼠标离开 onmouseout
鼠标经过 tr 行，当前的行变背景颜色，鼠标离开去掉当前的背景颜色
注意：第一行( thead 里面的行)不需要变换颜色，因此我们获取的是 tbody 里面的行

<!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>
        * {
   
            margin: 0;
            padding: 0;
        }

        table {
   
            font-size: 14px;
            text-align: center;
            border-collapse: collapse;
        }

        th,
        td {
   
            padding: 5px 7px;
            border-bottom: 1px solid #dfdfe5;
        }

        th {
   
            color: #4148bf;
            font-weight: 600