案例：表格隔行变色(鼠标划过背景色恢复)

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style>

    * {

      padding: 0;

      margin: 0;

    }

    .wrap {

      width: 500px;

      margin: 100px auto 0;

    }

    table {

      border-collapse: collapse;

      border-spacing: 0;

      border: 1px solid #c0c0c0;

      width: 500px;

      cursor: pointer;

    }

    th,

    td {

      border: 1px solid #d0d0d0;

      color: #404060;

      padding: 10px;

      text-align: center;

    }

    th {

      background-color: #09c;

      font: bold 16px "微软雅黑";

      color: #fff;

    }

    td {

      font: 14px "微软雅黑";

    }

    tbody tr {

      background-color: pink;

    }

  </style>

</head>

<body>

  <div class="wrap">

    <table>

      <thead>

        <tr>

          <th>序号</th>

          <th>姓名</th>

          <th>课程</th>

          <th>成绩</th>

        </tr>

      </thead>

      <tbody id="j_tb">

        <tr>

          <td>

            1

          </td>

          <td>柳岩</td>

          <td>语文</td>

          <td>100</td>

        </tr>

        <tr>

          <td>

            2

          </td>

          <td>苍老师</td>

          <td>日语</td>

          <td>100</td>

        </tr>

        <tr>

          <td>

            3

          </td>

          <td>凤姐</td>

          <td>营销学</td>

          <td>100</td>

        </tr>

        <tr>

          <td>

            4

          </td>

          <td>芙蓉姐姐</td>

          <td>数学</td>

          <td>10</td>

        </tr>

        <tr>

          <td>

            5

          </td>

          <td>佐助</td>

          <td>英语</td>

          <td>100</td>

        </tr>

        <tr>

          <td>

            6

          </td>

          <td>卡卡西</td>

          <td>体育</td>

          <td>100</td>

        </tr>

        <tr>

          <td>

            7

          </td>

          <td>乔峰</td>

          <td>体育</td>

          <td>100</td>

        </tr>

      </tbody>

    </table>

  </div>

  <script src="common.js"></script>

  <script>

    //获取所以的行

    var trs = my$("j_tb").getElementsByTagName("tr");

    for (var i = 0; i < trs.length; i++) {

      trs[i].style.backgroundColor = i % 2 == 0 ? "white" : "skyblue";

      //鼠标进入

      trs[i].onmouseover = mouseoverHandle;

      //鼠标离开

      trs[i].onmouseout = mouseoutHandle;

    }

    //鼠标进入的时候，先把设置后的颜色保存，等到鼠标离开再恢复即可

    var lastColor = "";

    function mouseoverHandle() {//鼠标进入

      lastColor = this.style.backgroundColor;

      this.style.backgroundColor = "pink";

    }

    function mouseoutHandle() {//鼠标进入

      this.style.backgroundColor = lastColor;

    }

  </script>

</body>

</html>

JS---案例：表格隔行变色(鼠标划过背景色恢复)的更多相关文章

  1. JS实现表格隔行变色

    用到的鼠标事件:(1)鼠标经过 onmouseover:(2)鼠标离开 onmouseout 核心思路:鼠标经过 tr 行的时候,当前行会改变背景颜色,鼠标离开的时候去掉背景颜色. 注意:第一行(th ...

  2. js控制表格隔行变色

    只是加载时候隔行变一个颜色,鼠标滑动上去时候没有变化 <table width="800" border="0" cellpadding="0& ...

  3. jquery插件之表格隔行变色并鼠标滑过高亮显示

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...

  4. 表格隔行变色_CSS实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  5. 表格隔行变色_jQuery控制实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  6. 表格的一些原生js操作（隔行变色，高亮显示，添加删除，搜索）

    看着网上的视频教程,虽说还是有点简单,但还是不免想记录下.这些操作包括(隔行变色,高亮显示,添加删除,搜索功能),而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几 ...

  7. 案例(拖拽对话框、高清放大镜、自制滚动条、元素的隐藏方式、表格隔行变色、tab切换效果、字符串拼接、刷新评论)

    一.拖拽对话框 <style> .of{ width: 500px; } #link,#close{ text-decoration: none; margin: 0 10px; font ...

  8. 用JQuery实现表格隔行变色和突出显示当前行

    用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...

  9. JavaScript 实现表格隔行变色

    JavaScript 实现表格隔行变色 版权声明:未经授权,严禁分享! 构建界面 界面HTML代码 <style> #data,th,td{ border: 1px solid #aaaa ...

随机推荐

  1. 【转载】objective-c强引用与弱引用

    形象比喻蛮好玩的^_^    __weak 和 __strong 会出现在声明中   默认情况下,一个指针都会使用 __strong 属性,表明这是一个强引用.这意味着,只要引用存在,对象就不能被销毁 ...

  2. windows 可执行文件分析

    windows可执行文件是什么? 是具有PE文件格特性的文件,例如:.exe.dll.ocx等文件. 注:(这里只是让大家能明了一些,其实,可执行与否,和后缀没有什么关系,后缀只是windows方便管 ...

  3. RvmTranslator7.2

    1. RvmTranslator7.2 增加一个视图方块,方便视图切换; Download: https://github.com/eryar/RvmTranslator/releases/tag/7 ...

  4. vue中使用watch函数，当数据改变时自动引发事件

    本来我的需求是这样的,使用ElementUI的日期选择器,当日期选择器被更改时需要根据新日期来向服务器获取新数据,但是发现这个日期选择器没有change事件,后来终于发现vue有个watch函数就是用 ...

  5. <随便写>佛祖,哈哈!

    print(" _ooOoo_ ") print(" o8888888o ") print(" 88 . 88 ") print(" ...

  6. RocketMQ补偿方案架构设计

    RocketMQ作为消息中间件,在系统异步化架构中,应用非常广泛.但是我们在享用RocketMQ的同时,也不能百分百完全信赖它.一旦RocketMQ崩溃了,给我们业务带来的也将是毁灭性打击. 因此,我 ...

  7. 08-5-switch

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 数据库连接客户端 dbeaver 程序包以及使用说明

    dbeaver 是一个基于 Eclipse 的数据库客户端,支持几乎所有常见的数据库.分为商业版和社区版,社区版可以免费使用. 官网和 GitHub https://dbeaver.io/ https ...

  9. 2018-8-10-WPF-鼠标移动到列表上-显示列表图标

    title author date CreateTime categories WPF 鼠标移动到列表上 显示列表图标 lindexi 2018-08-10 19:16:51 +0800 2018-2 ...

  10. spring中的ResponseEntity理解

    参考: https://blog.csdn.net/weixin_37869477/article/details/82762976 https://blog.csdn.net/sswqzx/arti ...