运行效果如下图：

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. unity 脚本编译顺序

    根据官方的解释,它们的编译顺序如下: (1)所有在Standard Assets.Pro Standard Assets或者Plugins文件夹中的脚本会产生一个Assembly-CSharp-fil ...

  2. obj文件的连接问题以及tlib的基本用法

    1.基础研究 用tcc将程序编译为.obj文件. 这里也可以使用tcc -linclude run.c来将run.c文件编译成run.obj文件. 再用tcc对下面的程序进行编译链接,发现提示错误: ...

  3. KesionCMS V6.5后台拿SHELL方法

    Title:KesionCMS V6.5后台拿SHELL方法  --2011-03-29 00:21 最近弄一个站点,是KesionCMS V6.5的WEB系统,试了下后台拿webshell方法,记下 ...

  4. linux教程之四

    相信不少想学习linux的新手们正愁不知道看什么linux学习教程好,下面小编给大家收集和整理了几点比较重要的教程,供大家学习,如需想学习更多的话,可到wdlinux学堂寻找更多教程.   linux ...

  5. python手记(38)

    runfile(r'K:\testpro\testopencv.py', wdir=r'K:\testpro') http://blog.csdn.net/myhaspl myhaspl@qq.com ...

  6. ACM2114_S[I](1^3+2^3+3^3）

    #include<iostream> using namespace std; int main() { __int64 n,m,i,j,sum; while(cin>>n) ...

  7. HDU4742----Pinball Game 3D（三维LIS、CDQ分治）

    题意:三维空间内 n个小球,对应坐标(x,y,z).输出LIS的长度以及方案数. 首先可以先按x排序,先降低一维,然后 剩下y .z,在y上进行CDQ分治,按y的大小用前面的更新后面的.z方向离散化之 ...

  8. HDU 5505 - BestCoder Round #60 - GT and numbers

    题目链接 : http://bestcoder.hdu.edu.cn/contests/contest_chineseproblem.php?cid=641&pid=1002 思路 : N有若 ...

  9. MD中bitmap源代码分析--设置流程

    1. 同步/异步刷磁盘 Bitmap文件写磁盘分同步和异步两种: 1) 同步置位:当盘阵有写请求时,对应的bitmap文件相应bit被置位,bitmap内存页被设置了DIRTY标志.而在下发写请求给磁 ...

  10. Android下如何理解onMeasure，onLayout的过程

    在Android中view如何完成绘制这个过程介绍了很多,但是很多理论化的东西,最近重新整理一下,通俗的讲解一下. View绘制过程就好比你向银行贷款, 在执行onMeasure的时候,好比银行告诉你 ...