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

<!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. grep 强大的文本搜索工具

    1.grep -r "History folder does't exist:" * :中间是要搜索的文本,* 表示全部显示出来

  2. jQuery插件编写，

    jQuery插件编写 jQuery插件 最近搞jquery插件的编写这里做下笔记 给jquery扩展的方式很多,看的我眼花缭乱 方式1 $.fun=function(){} 方式2 $.fn.fun= ...

  3. Java怎样对一个属性设置set或get方法的快捷键

    具体步骤如下: 首页,在testApp.java 类中定义属性,例如:public Sting name; 其次,Alt+Shift+S,  选择Generate Getters and Setter ...

  4. Jmeter 录制脚本【转】

    Jmeter 录制脚本[转] Jmeter中有2种方法可以录制脚本.  不过我个人非常不推荐录制脚本,录制的脚本混乱,需要再次加工才能使用. 像我这么精通HTTP协议的人. 一直都是使用Fiddler ...

  5. 一.ES6的开发环境搭建

    前言: 现在的Chrome浏览器已经支持ES6了,但是有些低版本的浏览器还是不支持ES6的语法,这就需要我们把ES6的语法自动的转变成ES5的语法.Webpack是有自动编译转换能力的,除了Webpa ...

  6. 字符串哈希——1056E

    典型的字符串哈希题 字符串hash[i]:子串s[1-i]代表的值 要截取串s[l-r]  求hash[r]-hash[l-1]*F[len]即可 #include<bits/stdc++.h& ...

  7. 爬虫——python——百度地图经纬度查询——经纬度查看地点地名——利用百度API获取地名经纬度——爬取所有的中国地址

    import requests address = '40.8587960,86.866991' url = 'http://api.map.baidu.com/geocoder?output=jso ...

  8. linux系统添加定时任务

    http://linuxtools-rst.readthedocs.io/zh_CN/latest/tool/crontab.html

  9. echarts高级

    常用,待续... ♣tooltip自动轮播 ♣ 实现数据自动轮播 原理:其实就是timeline,获取某几段(时间)的数据,然后隐藏timeline ♣ legend自动轮播 ♣ 左侧多字出省略号 f ...

  10. hibernate离线条件查询设置or关系

    detachedCriteria.add(Restrictions.or(Restrictions.isNull(""), Restrictions.isNull("&q ...