jQuery实现表格隔行换色


Posted in jQuery onSeptember 01, 2018

本文实例为大家分享了jQuery实现表格隔行换色的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>使用JQ完成表格隔行换色</title>
    <script src="js/jquery.min.js"></script>
    <script>
      $(function() {
        $("tbody tr:odd").css("background-color","aquamarine");
        $("tbody tr:even").css("background-color","bisque");
        var tb = $("tbody tr");
        var oldColor;
        for(var i=0;i<tb.length;i++) {
          //alert(oldColor);
          $("tbody tr")[i].onmouseover = function() {
            oldColor = this.style.backgroundColor;
            this.style.backgroundColor = "yellow";
          }
          $("tbody tr")[i].onmouseout = function() {
            this.style.backgroundColor = oldColor;
          }
        }
      });
    </script>
  </head>
  <body>
    <table id="tbl" border="1" border-collapse="collapse" align="center" cellspacing="0" cellpadding="5" width="400" height="20">
      <thead>
        <tr>
          <th>编号</th><th>姓名</th><th>年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td><td>张三</td><td>12</td>
        </tr>
        <tr>
          <td>2</td><td>李四</td><td>22</td>
        </tr>
        <tr>
          <td>3</td><td>王五</td><td>13</td>
        </tr>
        <tr>
          <td>4</td><td>马六</td><td>14</td>
        </tr>
        <tr>
          <td>5</td><td>伍六七</td><td>17</td>
        </tr>
        <tr>
          <td>6</td><td>梅花十三</td><td>17</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

疑问:为什么this.style.backgroundColor = oldColor中的this不能用$("tbody tr")[i]代替??

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
基于jquery实现多选下拉列表
Aug 02 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
jquery实现的放大镜效果示例
Feb 24 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
jQuery插件实现图片轮播效果
Oct 19 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 #jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 #jQuery
jQuery实现的简单手风琴效果示例
Aug 29 #jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 #jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 #jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 #jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 #jQuery
You might like
用PHP和ACCESS写聊天室(七)
2006/10/09 PHP
PHP内置过滤器FILTER使用实例
2014/06/25 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
php实现比较两个文件夹异同的方法
2015/06/18 PHP
CI框架出现mysql数据库连接资源无法释放的解决方法
2016/05/17 PHP
ThinkPHP 3.2.3实现加减乘除图片验证码
2018/12/05 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
jQuery UI的Dialog无法提交问题的解决方法
2011/01/11 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
2011/06/20 Javascript
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
Prototype源码浅析 Number部分
2012/01/16 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
2019/09/06 Javascript
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
JavaScript中如何调用Java方法
2020/09/16 Javascript
[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06
2020/11/09 DOTA
Python collections模块实例讲解
2014/04/07 Python
Python线程指南详细介绍
2017/01/05 Python
python反转列表的三种方式解析
2019/11/08 Python
Django ValuesQuerySet转json方式
2020/03/16 Python
理货员的岗位职责
2013/11/23 职场文书
2014年技术员工作总结
2014/11/18 职场文书
谢师宴答谢词
2015/01/05 职场文书
解析MySQL binlog
2021/06/11 MySQL
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL
Python函数对象与闭包函数
2022/04/13 Python