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

<!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. mysql 多表join

    两个表可以简单地写为 select a.,b. from a left join b on a.id =b.id; 三个以上 select a.,b. from a left join b on a. ...

  2. [JZOJ4763] 【NOIP2016提高A组模拟9.7】旷野大计算

    题目 题目大意 给你一个数列,有很多个询问,询问一段区间内,某个数乘它的出现次数的最大值,也就是带权众数. 思考历程 第一次看到这道题,立马想到了树套树之类的二位数据结构,发现不行.(就算可以也很难打 ...

  3. 深入浅出 Java Concurrency (27): 并发容器 part 12 线程安全的List/Set[转]

    本小节是<并发容器>的最后一部分,这一个小节描述的是针对List/Set接口的一个线程版本. 在<并发队列与Queue简介>中介绍了并发容器的一个概括,主要描述的是Queue的 ...

  4. iOS开发UIView.h简介

    1.UICoordinateSpace不同坐标空间的坐标切换 @protocol UICoordinateSpace <NSObject> //将当前的坐标空间点转换到指定的坐标空间 - ...

  5. day 42 03--CSS布局设置

      03--CSS布局设置   本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 ...

  6. Python学习day05 - Python基础(3) 格式化输出和基本运算符

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  7. JS基础语法之DOM02(事件）

    1.常用事件 1.onclick 单击 应用场景:为按钮绑定 2.ondbclick 双击 3.onfocus   获得焦点 4.onblur 失去焦点 应用场景:用于表单验证,用户离开某个输入框时, ...

  8. VC窗体透明而控件不透明以及Static文本背景透明方法

    出自http://my.oschina.net/ypimgt/blog/60951 优点:    1.Dialog 窗体完全透明.     2. 窗体上的控件不透明. DC 绘制的图形不透明.     ...

  9. 重装一次CM的坑爹记录

    今天同事要对测试环境进行降级(测试高于生产所以要求降级),自己不经常搞运维,但是无奈测试环境没运维管理只能自己上了. 流程和遇到问题按数字表示. 1.重装CM(clouder manager)这个过程 ...

  10. Hadoop构架概览

    hadoop是一个开源的软件框架,是一个利用商业硬件处理和存储大型数据的软件.从下到上主要有五个主要的组成部分: 集群,是一套主机(节点)组成的.节点可以以机架划分.这个是硬件级别的构架. YARN构 ...