1.通过使用onmouseover onmouseout方法
2.变色使用background-color(css)属性
3.变色的标签是td(tr仅仅能使用事件,颜色样式不起作用)
第一种方法 使用样式操作
<style>
.tr_color{
background-color:#ffffff;
} .tr_color_hover{
background-color:blanchedalmond;
}
</style>
<script type="text/javascript">
function mover(obj){
$(obj).children("td").each(function(){
$(this).removeClass("tr_color");
$(this).addClass("tr_color_hover");
}) }
function mback(obj){
$(obj).children("td").each(function(){
$(this).removeClass("tr_color_hover");
$(this).addClass("tr_color");
})}
</script>
<tr onmouseover="mover(this)" onmouseout="mback(this)">
<td height="18" class="tr_color">
</tr>


另外一种方法 直接对背景色操作
<script type="text/javascript">
function mover(obj){
$(obj).children("td").each(function(){
$(this).attr("bgColor","#eafcd5")
}) }
function mback(obj){
$(obj).children("td").each(function(){
$(this).attr("bgColor","#FFFFFF")
})}
</script>
<tr onmouseover="mover(this)" onmouseout="mback(this)">
<td height="18"bgColor="#FFFFFF">
</tr>

jQuery特效 隔行变色的更多相关文章

  1. JQuery实现隔行变色和突出显示当前行 效果

    运行效果如下图: jquery关键代码: <script type="text/javascript"> //该文件为:js.js // 当鼠标移到表格上是,当前一行背 ...

  2. jQuery 表格隔行变色插件

    jQuery提供了用于扩展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法. 基本的JS框架代码如下: ;(function($) { $.fn. ...

  3. jQuery实现隔行变色、悬停变色 ( CSS3伪类选择器:nth-child() )

    <title>实现隔行变色</title> <script src="Js/jquery-1.8.0.min.js" type="text/ ...

  4. jQuery实现隔行变色

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. jquery table 隔行变色+点谁谁变色

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  6. jquery 全选、反选、获取值、背景行、隔行变色和鼠标略过变色变色全特效

    好久没有写东西了,当然不是没东西可写,只是没有时间写.今天抽出点时间来把我最近使用的一些 Javascript 特效的东西贴出来,供自己或者别人查询使用.最近我在做一个新的 B/S 系统,由于没有专门 ...

  7. jquery实现html表格隔行变色

    效果图 实现代码: 通过css控制样式,利用jquery的addClass方法实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans ...

  8. jquery插件之表格隔行变色并鼠标滑过高亮显示

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...

  9. 用JQuery实现表格隔行变色和突出显示当前行

    用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...

随机推荐

  1. java反射 实例

    首先介绍几个概念: 1.Java反射的概念 反射含义:可以获取正在运行的Java对象. 2.Java反射的功能 1)可以判断运行时对象所属的类 2)可以判断运行时对象所具有的成员变量和方法 3)通过反 ...

  2. fabric 安装及使用

    官网地址 1.安装 pip install fabric 依赖 Paramiko .PyCrypto库 以下依赖肯能要手动安装 #安装 pycrypto 密码库pip install pycrypto ...

  3. Life is short, you need Python

    今年四五月份的时候我打算学一门计算机语言. 计算机语言实在是很多,选哪一个? 其实这个选择就和去市场买菜类似,想明白了自己的需求才能做好决定.你想做什么饭,就去买什么菜.想做南瓜粥,就要去买南瓜,想要 ...

  4. paip.navicat form mysql导入文本文件时CPU占用100%的解决

    paip.navicat form  mysql导入文本文件时CPU占用100%的解决 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:h ...

  5. MVC3学习随记一

    最近才接触mvc,也是才接触linq语法,还有EntiyFramework,个人感觉这种开发模式还是挺不错的,随手记点笔记,简单做个增删改查吧 一.实例化上下文ObjectContext: 引用空间那 ...

  6. 对js中prototype的理解

    一直不理解child.prototype = new Parent()和child.prototype =Parent.prototype的区别,到现在为止,我觉得它俩最大的区别就是:前者共享构造器里 ...

  7. JSON 小记

    JSON是在web应用中频繁使用的一种数据结构,在使用过程中经常出现格式错误等等问题,如果能清晰的了解JSON的构成,那将会避免这些错误 英文好的可以查看原文: 地址:http://www.codep ...

  8. java web 之 BeanUtils.populate的作用

    首先,它是在org.apache.commons.beanutils.BeanUtils包中的一个方法. 方法的作用:用来将一些 key-value 的值(例如 hashmap)映射到 bean 中的 ...

  9. Apache-Tomcat 和 Apache-Maven配置

    1.1.下载安装文件 官网对应版本下载,例:apache-tomcat-8.0.35-windows-x64.zip 1.2.指定对应的安装目录: 例:D:\JavaSoft\apache-tomca ...

  10. PHP面试题之算法解析

    面试中经常被问到会什么算法,这里整合一些常见的算法及它们的实现原理.下面的例子都是经过测试可用的,如果有什么问题请告知!! 本人小白,如果有更好的实现方式,敬请赐教,感激不尽!!!! 冒泡排序,快速排 ...