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

<!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. Python全栈开发：线程、进程和协程

    Python线程 Threading用于提供线程相关的操作,线程是应用程序中工作的最小单元. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 #!/usr/bin/env pytho ...

  2. idea-----idea的项目中output框出现乱码

    找到tomcat的安装目录中的logging.properties 我的在这里:E:\tools\tomcat\apache-tomcat-8.5.38\conf 改其中的参数 修改前  java.u ...

  3. 莫烦PyTorch学习笔记(五)——模型的存取

    import torch from torch.autograd import Variable import matplotlib.pyplot as plt torch.manual_seed() ...

  4. springboot指定项目访问路径前缀

    springboot默认的运行方式是没有项目前缀的 如果这时候我们要加上调试或者发布,可以使用下面的方法加上 方法:

  5. Attribute类的使用

    为每个变量设置设置属性 "Description" public class PatternOption { /// <summary> /// 方向图步长 /// & ...

  6. axis2开发webservice接口入门到精通详解(转)

    最近在开发接口,在网上发现了两篇不错的文章,给大家分享下: 第一篇: 一.Axis2的下载和安装 1.可从http://ws.apache.org/axis2/ 下载Axis2的最新版本:      ...

  7. VS2005下安装boost

    本文参照http://dxwang.blog.51cto.com/384651/711798 (一)boost的安装和编译 1:下载boost版本,目前最新的版本为1-47-0    下载地址为htt ...

  8. Java基础（业务问题）

    幂等的处理方式 一.查询与删除操作是天然幂等 二.唯一索引,防止新增脏数据 三.token机制,防止页面重复提交 四.悲观锁  for update 五.乐观锁(通过版本号/时间戳实现, 通过条件限制 ...

  9. Lua程序设计之数值

    (摘自Lua程序设计) 数值常量 从Lua5.3版本开始Lua语言为数值格式提供了两种选择:被称为integer的64位整形和被称为float的双精度浮点类型(注意,"float" ...

  10. Linux产生coredump文件（core）

    1.可以使用命令 ulimit -c unlimited 来开启 core dump 功能,并且不限制 core dump 文件的大小: 如果需要限制文件的大小,将 unlimited 改成你想生成 ...