运行效果如下图:

jquery关键代码:

 <script type="text/javascript"> //该文件为:js.js
// 当鼠标移到表格上是,当前一行背景变色
$(document).ready(function(){
var odd_color="#ddd";//奇数行 颜色
var even_color="#fff";//偶数行 颜色
var hover_color="#d5f4fe"; //鼠标悬浮所在行的颜色 $(".data_list tr:odd td").css("background-color",odd_color); //改变奇数行背景色
$(".data_list tr:odd").attr("bg",odd_color); // 把背景色保存到属性中
$(".data_list tr:even").attr("bg",even_color); $(".data_list tr td").mouseover(function(){ // 当鼠标移到表格上,当前一行背景变色
$(this).parent().find("td").css("background-color",hover_color);
}).mouseout(function(){ // 离开的该行恢复该行原有背景颜色
var bgc = $(this).parent().attr("bg");
$(this).parent().find("td").css("background-color",bgc);
});
});
</script>

html关键代码


<html>
<head>
<meta charset="UTF-8"/>
<title>JQuery实现隔行变色和突出显示当前行 效果</title>
<script type="text/javascript" src='jquery.js'></script>
<script type="text/javascript" src='js.js'></script> <!--加载jq部分处理代码--> </head>
<body>
<div>
<table border="1" cellspacing="0" cellpadding="0" class="data_list">
<tr><th>用户姓名</th><th>用户性别</th><th>用户电话</th><th>用户邮箱</th><th>预计购置时间</th></th></tr>
<tr><td>name1</td><td>男</td><td>13900139000</td><td>test@hioop.net</td><td>2014-12-02</td></tr>
<tr><td>name2</td><td>男</td><td>13900139000</td><td>test@hioop.net</td><td>2014-12-02</td></tr>
<tr><td>name3</td><td>男</td><td>13900139000</td><td>test@hioop.net</td><td>2014-12-02</td></tr>
<tr><td>name6</td><td>男</td><td>13900139000</td><td>test@hioop.net</td><td>2014-12-02</td></tr>
<tr><td>name4</td><td>男</td><td>13900139000</td><td>test@hioop.net</td><td>2014-12-02</td></tr>
<tr><td>name5</td><td>男</td><td>13900139000</td><td>test@hioop.net</td><td>2014-12-02</td></tr>
</table>
</div>
</body>
</html>

转载请注明出处,谢谢!

JQuery实现隔行变色和突出显示当前行 效果的更多相关文章

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

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

  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特效 隔行变色

    1.通过使用onmouseover onmouseout方法 2.变色使用background-color(css)属性 3.变色的标签是td(tr仅仅能使用事件,颜色样式不起作用) 第一种方法 使用 ...

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

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

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

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

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

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

  9. jQuery选择器实现隔行变色和使用javaScript实现隔行变色

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--什么是选择器? jQuery选择器继承了 ...

随机推荐

  1. ural 1640 Circle of Winter

    这道题真的很无聊,就是找一个圆,至少有一个点在这个圆上,其他点不能在圆外,半径不定: #include <cstdio> #include <cstring> #include ...

  2. ChangeServiceConfig2 function

    ChangeServiceConfig2 function   Changes the optional configuration parameters of a service. Syntax C ...

  3. 你该学点HTML/CSS知识的9大理由

    每个人都应该学写代码——这一观点简直就是铺天盖地地映入我们眼帘.或许你会莫名其妙,程序员学代码那是理所应当,但是作为一个作家.营销人员.财务工作者甚至是工人,为什么也需要学习代码呢? 好吧,下面我会告 ...

  4. delphi TCXTreelist 通过代码控制行的可编辑性

    procedure TfrmSetOutPzTradeDeptPerson.grdTradeClientEditing(Sender: TObject;  AColumn: TcxTreeListCo ...

  5. 树形dp入门练习(hdu1011+hdu1061)

    hdu1011 和 hdu1561类似,给定每个节点的花费以及价值,并且子节点必须在父亲节点取到以后才可以被取到 相当于是在树上进行的01背包 dp时考虑每一个子树 root和它的每一个儿子,状态转移 ...

  6. 基于Hadoop集群的HBase集群的配置

    一  Hadoop集群部署 hadoop配置 二 Zookeeper集群部署 zookeeper配置 三  Hbase集群部署 1.配置hbase-env.sh HBASE_MANAGES_ZK:用来 ...

  7. MYSQL触发器学习笔记

    课程学至金色晨曦科技公司技术总监沙利穆 触发器 1.       什么是触发器 触发器是一种特殊类型的存储过程,不由用户直接调用.创建触发器时会对其进行定义,以便在对特定表或列作特定类型的数据修改时执 ...

  8. jsonp封装

    //jsonp的封装函数 function jsonp(url,parmter,callback){ //创建script标签 var script=document.createElement('s ...

  9. acd LCM Challenge(求1~n的随意三个数的最大公倍数)

    Problem Description Some days ago, I learned the concept of LCM (least common multiple). I've played ...

  10. hdu 1724 Ellipse simpson积分

    /* hdu 1724 Ellipse simpson积分 求椭圆的部分面积 simpson积分法 http://zh.wikipedia.org/zh-tw/%E8%BE%9B%E6%99%AE%E ...