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


    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧。

    此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示。整体代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>表格隔行变色且鼠标滑过高亮显示</title>
    <style>
    table{border-collapse:collapse;border:none;width:20%;}
    table tr td{border:1px solid #ccc;text-align:center;cursor:pointer;}
    .evenRow{background:#f0f0f0;}
    .oddRow{background:#ff0;}
    .activeRow{background:#f00;color:#fff;}
    </style>
    <script type="text/javascript" src="../../jquery-1.7.1.js"></script>
    </head>
    
    <body>
    <script>
    /*
    * tableUI 0.1
    * Copyright (c) 2014 tnnyang http://tnnyang.cnblogs.com/
    * 使用tableUI可以方便地将表格提示使用体验。先提供的功能有奇偶行颜色交替,鼠标移上高亮显示
    * Dependence jquery-1.7.1.js
    */ 
    ;(function($){
        $.fn.tableUI = function(options){   //经常用options表示有许多个参数 
            //各种属性、参数   创建一些默认值,拓展任何被提供的选项
        var defaults = {
            evenRowClass:"evenRow",
            oddRowClass:"oddRow",
            activeRowClass:"activeRow" 
            };
        var obj = $.extend(defaults,options);
        this.each(function(){   //this关键字代表了这个插件将要执行的jQuery对象   此处没有必要将this包在$号中如$(this),因为this已经是一个jQuery对象。    $(this)等同于 $($('#element'));
               //插件实现代码
            var thisTable = $(this);   //获取当前对象   此时this关键字代表一个DOM元素   我们可以alert打印出此时的this代表的是object HTMLTableElement
            //添加奇偶行颜色
            $(thisTable).find("tr:even").addClass(obj.evenRowClass);
            $(thisTable).find("tr:odd").addClass(obj.oddRowClass);
            //添加活动行颜色
            $(thisTable).find("tr").mouseover(function(){
                $(this).addClass(obj.activeRowClass);
                });
            $(thisTable).find("tr").mouseout(function(){
                $(this).removeClass(obj.activeRowClass);
                });
            });
        };
    })(jQuery);
    //在这个封闭程序中,我们可以无限制的使用$符号来表示jQuery函数。
    </script>
    <table cellpadding="0" cellspacing="0">
      <tr><td>1</td><td>2</td><td>3</td></tr>
      <tr><td>1</td><td>2</td><td>3</td></tr>
      <tr><td>1</td><td>2</td><td>3</td></tr>
      <tr><td>1</td><td>2</td><td>3</td></tr>
      <tr><td>1</td><td>2</td><td>3</td></tr>
    </table>
    <script>
    $(function(){
        $("table").tableUI();
        })
    </script>
    </body>
    </html>
  • 相关阅读:
    回想四叉树LOD地形(上)
    项目优化经验分享(四)需求与原型图
    CF79D Password
    2018-3-7-VisualStudio-csproj-添加-ItemGroup-的-Service-
    2018-3-7-VisualStudio-csproj-添加-ItemGroup-的-Service-
    2018-8-10-如何入门-C++-AMP-教程
    2018-8-10-如何入门-C++-AMP-教程
    2019-11-6-Roslyn-how-to-use-WriteLinesToFile-to-write-the-semicolons-to-file
    2019-11-6-Roslyn-how-to-use-WriteLinesToFile-to-write-the-semicolons-to-file
    2019-1-4-win10-uwp-win2d-CanvasVirtualControl-与-CanvasAnimatedControl
  • 原文地址:https://www.cnblogs.com/tnnyang/p/4744402.html
一二三 - 开发者的网上家园