用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. 程序员使用Node的十个技巧

    从问世到现在将近20年,JavaScript一直缺乏其它有吸引力的编程语言,比如Python和Ruby,的很多优点:命令行界面,REPL,包管理器,以及组织良好的开源社区.感谢Node.js和npm, ...

  2. 疯狂Android第一章:Android环境配置以及基本概念

    第一章 无关痒痛:Android Studio安装,配置,基本功能介绍! 重点内容:Android应用基本结构分析. 基础概念部分(只需知道作用,原理后见代码): Activity:安卓系统中负责与用 ...

  3. Spring 注入数据源

    一.在项目中添加dataSource所用到的包 dbcp数据源所需包:     commons-dbcp.jar     commons-pool.jar C3P0数据源所需包:     c3p0-0 ...

  4. Android PorterDuff.Mode

    1.PorterDuff.Mode.CLEAR所绘制不会提交到画布上. 2.PorterDuff.Mode.SRC显示上层绘制图片 3.PorterDuff.Mode.DST显示下层绘制图片 4.Po ...

  5. 使用bootstrap时，选项框出现的意外效果，怎么办？

    <label for="" style="float:right;margin-right:10%;">     <input type=&q ...

  6. PendingIntent概述

    一.定义 PendingIntent表示待定.等待.即将发生的意思.Intent表示的是立刻发生. PendingIntent的主要方法: int requestCode:表示请求码,跟intent是 ...

  7. 国外大神Leo-G的 DevopsWiki

    https://raw.githubusercontent.com/Leo-G/DevopsWiki/master/README.md 总结的太好了,直接把md文件贴过来好了!慢慢学习!分享给大家,觉 ...

  8. SQL Server 日志文件增长原因定位

    方法 1.sys.databases; -------------------------------------------------------------------------------- ...

  9. jquery实现导航栏鼠标点击后实行背景高亮，点击离开恢复（超级简单！！！！），jquery导航栏

    1.header部分要引入Jquery <asp:Content ID="HeaderContent" runat="server" ContentPla ...

  10. Visual Studio 2015 Update 3 RC 候选预览版粗来了

    .Net 基金会 http://www.dotnetfoundation.org/ 更新的真快,刚打完2的补丁包,3就粗来了............ https://www.visualstudio. ...