1.通过使用onmouseover onmouseout方法
2.变色使用background-color(css)属性
3.变色的标签是td(tr仅仅能使用事件,颜色样式不起作用)
第一种方法 使用样式操作
  1. <style>
  2. .tr_color{
  3. background-color:#ffffff;
  4. }
  5.  
  6. .tr_color_hover{
  7. background-color:blanchedalmond;
  8. }
  9. </style>
  10. <script type="text/javascript">
  11. function mover(obj){
  12. $(obj).children("td").each(function(){
  13. $(this).removeClass("tr_color");
  14. $(this).addClass("tr_color_hover");
  15. }) }
  16. function mback(obj){
  17. $(obj).children("td").each(function(){
  18. $(this).removeClass("tr_color_hover");
  19. $(this).addClass("tr_color");
  20. })}
  21. </script>
  22. <tr onmouseover="mover(this)" onmouseout="mback(this)">
  23. <td height="18" class="tr_color">
  24. </tr>


另外一种方法 直接对背景色操作
  1. <script type="text/javascript">
  2. function mover(obj){
  3. $(obj).children("td").each(function(){
  4. $(this).attr("bgColor","#eafcd5")
  5. }) }
  6. function mback(obj){
  7. $(obj).children("td").each(function(){
  8. $(this).attr("bgColor","#FFFFFF")
  9. })}
  10. </script>
  11. <tr onmouseover="mover(this)" onmouseout="mback(this)">
  12. <td height="18"bgColor="#FFFFFF">
  13. </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. 载入OpenSSL的动态库——学会使用tryToLoadOpenSslWin32Library和QPair

    Libraries name of openssl? The "library" portion of OpenSSL consists of two libraries. On ...

  2. android 自定义AlertDialog(一段)

    java: final AlertDialog dialog = new AlertDialog.Builder(mContext) .create(); dialog.setCancelable(f ...

  3. c# excel sheep 导出

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Da ...

  4. getpwent()

    http://baike.baidu.com/link?url=XcTB74zhdRLwFaqFIP73u-hSpZgGqYejqnnHGTRfhNF8B7Z2yO4pVwaFaMK24Hkk6nye ...

  5. MapReduce TotalOrderPartitioner 全局排序

    我们知道Mapreduce框架在feed数据给reducer之前会对map output key排序,这种排序机制保证了每一个reducer局部有序,hadoop 默认的partitioner是Has ...

  6. public void Delete<T>(List<T> EntityList) where T : class, new() 这是什么意思

    就是说T必须是一个类(class)类型,不能是结构(structure)类型. 这是类型参数约束,.NET支持的类型参数约束有以下五种: where T : struct                ...

  7. HDU 1757 A Simple Math Problem(矩阵高速幂)

    题目地址:HDU 1757 最终会构造矩阵了.事实上也不难,仅仅怪自己笨..= =! f(x) = a0 * f(x-1) + a1 * f(x-2) + a2 * f(x-3) + -- + a9 ...

  8. java 判断字符串编码

    String iso8859 = new String(sb.toString().getBytes("iso8859-1"));String gbk = new String(s ...

  9. 第003篇 深入体验C#项目开发(二)

    下半本的5个项目也看完了,还是跳着看,只看大概!        第6章 企业交互系统            作者入职一年,开始带新的2个实习生的项目!一个外资企业内部的OA交互系统,这次又是一个基于w ...

  10. Ubuntu kylin 有可能成为未来中国的主流系统吗?

    编前语: 无意间开始研究起linux,因为目前互联网很多人,包括我都隐约感觉到,windows系统在中国乃至世界在今后的流行度会逐步降低,不为什么,其中最主要的是安全问题,Microsoft 微软公司 ...