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

<!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. nginx压力测试webbench

    下载压力测试工具webbench wget http://home.tiscali.cz/~cz210552/distfiles/webbench-1.5.tar.gz 安装依赖包 yum -y in ...

  2. 箭头函数报错：Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.

    解决:根目录新建babel.config.js加入如下内容 module.exports = { presets: [ "@babel/preset-env", "@ba ...

  3. C++写矩阵的转置

    (2019年2月19日注:这篇文章原先发在自己github那边的博客,时间是2017年2月5日) 对于任意非n阶矩阵的转置,用c++应该怎么写代码,思考了一下,发现并没有那么简单,上网找到了一个比较好 ...

  4. Tree and Permutation (HDU 6446) 题解

    // 昨天打了一场网络赛,表现特别不好,当然题目难度确实影响了发挥,但还是说明自己太菜了,以后还要多多刷题. 2018 CCPC 网络赛 I - Tree and Permutation 简单说明一下 ...

  5. ArduinoUno和Leonardo的区别

    学习过Arduino的同学对ArduinoUno和Lenardo的不同点会有所了解,但说起具体的区别估计还是很多人答不上来,今天我们就详细解释下Arduino Uno和Leonardo的不同. 我们从 ...

  6. Django项目订单接入支付宝

    1.首先下载所需要的包 pip install python-alipay-sdk 2.在视图函数里面引入所需要的类 from alipay import AliPay 3.利用这个类创建一个实例对象 ...

  7. sed awk 练习

    #定位到某一行 添加内容 lower_case_flag=`cat /etc/my.cnf|grep "^lower_case_table_names"` if [ "X ...

  8. linux中断处理-顶半部（top half）和底半部（bottom half） -转

    原文:http://rensanshi.blog.163.com/blog/static/21395510820136282224877/ 设备的中断会打断内核中进程的正常调度和运行,系统对更高吞吐率 ...

  9. ucore 地址映射的几个阶段

    第零阶段: 启动之后的实模式阶段 vir = lin = pa 第一阶段 : 启动 bootloader 的段式分页 这里段基址是0 ,所以地址空间维持不变 vir addr = lin addr = ...

  10. hdu2516

    hdu2516斐波那契博弈,也是一堆博弈的一种,第一个人第一次可以拿任意多,但是不能取完,第二个人拿至少一个,但不能超过上一个人拿的两倍 #include<iostream> #inclu ...