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

上源码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>表格隔行背景和突出显示当前行</title>
        <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
        <style type="text/css">
            body{ margin:0 auto; font-size:12px;}
            .data_list td{ width:100px;}
        </style>

<script type="text/javascript">
        /* 当鼠标移到表格上是，当前一行背景变色 */
      $(document).ready(function(){
            $(".data_list tr td").mouseover(function(){
                $(this).parent().find("td").css("background-color","#d5f4fe");
            });
      })
      /* 当鼠标在表格上移动时，离开的那一行背景恢复 */
      $(document).ready(function(){ 
            $(".data_list tr td").mouseout(function(){
                var bgc = $(this).parent().attr("bg");
                $(this).parent().find("td").css("background-color",bgc);
            });
      })
      
      $(document).ready(function(){ 
            var color="#ffeab3"
            $(".data_list tr:odd td").css("background-color",color);  //改变偶数行背景色
            /* 把背景色保存到属性中 */
            $(".data_list tr:odd").attr("bg",color);
            $(".data_list tr:even").attr("bg","#fff");
      })
      </script>
    </head>
    <body>
        <table class="data_list">
        <tr><td> 100 </td>  <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
        <tr><td> 100 </td>  <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
        <tr><td> 100 </td>  <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
        <tr><td> 100 </td>  <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
        <tr><td> 100 </td>  <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
        <tr><td> 100 </td>  <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
        <tr><td> 100 </td>  <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
        <tr><td> 100 </td>  <td> 100 </td><td> 100 </td><td> 100 </td><td> 100 </td></tr>
        </table>
    </body>
</html>

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

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

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

  2. 我的第一个jQuery插件--表格隔行变色

    虽然网上有大量的插件供我们去使用,但不一定有一款适合你的,必要的时候还是要自己动手去敲的.下面,开始我的第一个插件... 参考<锋利的JQuery>,JQuery为开发插件增设了俩个方法: ...

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

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

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

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

  5. jQuery 表格隔行变色插件

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

  6. 表格隔行变色_CSS实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  7. 表格隔行变色_jQuery控制实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  8. css3表格隔行变色和表格选中变颜色代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

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

随机推荐

  1. C语言中宏定义（#define）时do{}while(0)的价值(转)

    C语言中宏定义(#define)时do{}while(0)的价值 最近在新公司的代码中发现到处用到do{...}while(0),google了一下,发现Stack Overflow上早有很多讨论,总 ...

  2. <转>java中静态方法和非静态方法的存储

    Java中非静态方法是否共用同一块内存? 将某 class 产生出一个 instance 之后,此 class 所有的 instance field 都会新增一份,那么所有的 instance met ...

  3. win7使用右键导致死机、假死、explorer无法响应的解决方法

    右键引起explorer无法响应,奔溃,主要是由于COMCTL32.DLL和COMCTL21.OCX文件引起的 描述:comctl32.dll是Windows应用程序公用GUI图形用户界面模块.报告提 ...

  4. weblogic配置domain和删除domain

    weblogic创建域的过程比较简单,但是在创建域之前一定要注意不能存在重名的domain. Domain简单定义为:是一个逻辑管理单元,Domain下面包含着weblogic应用服务器中的所有东西, ...

  5. 【Heritrix基础教程之4】开始一个爬虫抓取的全流程代码分析

    在创建一个job后,就要开始job的运行,运行的全流程如下: 1.在界面上启动job 2.index.jsp 查看上述页面对应的源代码 <a href='"+request.getCo ...

  6. Nexus远程Maven仓库索引下载教程

    下载Maven仓库索引有两种方式: 一.手动下载 首先将索引下载到本地,下载地址:nexus-maven-repository-index.zip 解压索引压缩包,将里面内容全部拷贝   关闭当前Ne ...

  7. HTML 5 学习 （1）

    一.HTML的发展 20世纪70年代~80年代之间HTML正式诞生,但是没有一个统一的标准,显示内容比较单一.在netscape上显示的网页可能在ie5中无法正常显示,反之亦然. 1998年,HTML ...

  8. SurfaceView的补充

    1.什么时候使用:当自定义View需要频繁刷新,或者刷新数据比较大的时候,建议使用SurfaceView取代使用View 2.继承SurfaceView的并重写的步骤:①.继承SurfaceView类 ...

  9. A + B Problem II---hdu1002

    A + B Problem II Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  10. iOS绘制view

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...