纯js案例 --鼠标移入表格某一行变色

最新推荐文章于 2023-08-26 11:05:53 发布

Feolu

最新推荐文章于 2023-08-26 11:05:53 发布

阅读量693

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/qq_40937541/article/details/113848266

版权

js 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

这段代码示例展示了如何通过CSS和JavaScript实现HTML表格中行在鼠标悬停时背景色变为粉色的效果。CSS部分定义了表格边框和单元格宽度，以及一个用于鼠标悬停时改变背景色的类。JavaScript部分则为表格的每一行添加了事件监听器，当鼠标进入和离开行时，动态添加或移除这个背景色类。

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

CSS代码

 table,td {
      border: 1px solid #ccc;
    }
    td {
      width: 100px;
    }
    .bg {
      background-color: pink;
    }

HTML代码

<table cellspacing = 0>
    <thead>
      <tr>
        <td>序号</td>
        <td>内容</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>测试内容</td>
      </tr>
      <tr>
        <td>2</td>
        <td>测试内容</td>
      </tr>
      <tr>
        <td>3</td>
        <td>测试内容</td>
      </tr>
      <tr>
        <td>4</td>
        <td>测试内容</td>
      </tr>
      <tr>
        <td>5</td>
        <td>测试内容</td>
      </tr>
    </tbody>
  </table>

JS代码

var trs = document.querySelector('tbody').querySelectorAll('tr')
    for (let index = 0; index < trs.length; index++) {
      // 鼠标移入 背景变色
      trs[index].onmouseover = function() {
        this.className = 'bg'
      }
       // 鼠标移走 背景无色
       trs[index].onmouseout = function() {
        this.className = ''
      }
    }

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table,td {
      border: 1px solid #ccc;
    }
    td {
      width: 100px;
    }
    .bg {
      background-color: pink;
    }
  </style>
</head>
<body>
  <table cellspacing = 0>
    <thead>
      <tr>
        <td>序号</td>
        <td>内容</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>测试内容</td>
      </tr>
      <tr>
        <td>2</td>
        <td>测试内容</td>
      </tr>
      <tr>
        <td>3</td>
        <td>测试内容</td>
      </tr>
      <tr>
        <td>4</td>
        <td>测试内容</td>
      </tr>
      <tr>
        <td>5</td>
        <td>测试内容</td>
      </tr>
    </tbody>
  </table>
  <script>
    var trs = document.querySelector('tbody').querySelectorAll('tr')
    for (let index = 0; index < trs.length; index++) {
      // 鼠标移入 背景变色
      trs[index].onmouseover = function() {
        this.className = 'bg'
      }
       // 鼠标移走 背景无色
       trs[index].onmouseout = function() {
        this.className = ''
      }
    }
  </script>
</body>
</html>