实现原理：1.找到表格的奇偶行，然后添加不同的class，激活行高亮显示也很简单，只要判断mouseover事件，然后添加一个class，mouseout的时候，再移除

　　　　　　　　class就行；

　　　　　　　2.不用class，直接改变background属性；

　　　　　　　　直接开干，这里用第二种方法。

　　第一步： 模板 

　　　　jq有一个基本框架，直接搬过来呗

复制代码

(function($){
    $.fn.yourName = function(options){        //各种属性、参数        }        var options = $.extend(defaults, options);
        return this.each(function(){        //插件实现代码        });
    };
})(jQuery);

复制代码

第二步： 套东西进去

　　1.命名

　　2.有哪些参数、属性，这里就是要结合功能来考虑了

　　　　evenColor (偶数行颜色)    oddColor（奇数行颜色）  activeColor（激活行颜色） changeFlag（是否开启隔行变色）oldColor （保存原来的颜色)；

复制代码

(function ($) {
    $.fn.tableUI = function ( options ) {        var defaults = {
            evenColor: '#dddddd', //偶数行颜色
            oddColor: '#ffffff',  //奇数行颜色
            activeColor: '#09f', //激活行颜色
            changeFlag: true,     //是否开启隔行变色
            oldColor: ''　　　　　　//保存原来颜色
        }        var options = $.extend( defaults, options );        return this.each(function () {
           //功能代码
        })
    }
})(jQuery);

复制代码

此处重点： 

 var options = $.extend( defaults, options );

　　合并多个对象为一个，就是如果你在调用的时候写了新的参数，就用你新的参数，如果没有写，就用默认的参数。

现在就是完善功能代码

复制代码

(function ($) {
    $.fn.tableUI = function ( options ) {        var defaults = {
            evenColor: '#dddddd', //偶数行颜色
            oddColor: '#ffffff',  //奇数行颜色
            activeColor: '#09f', //激活行颜色
            changeFlag: true,     //是否开启隔行变色
            oldColor: ''
        }        var options = $.extend( defaults, options );        return this.each(function () {            var thisTable = $(this);            if ( options.changeFlag ) {                //奇偶行颜色
                $(thisTable).find('tr:even').css( 'background', options.evenColor );
                $(thisTable).find('tr:odd').css( 'background', options.oddColor );                //激活行颜色
                $(thisTable).find('tr').bind('mouseover', function () {                    //保存原来的颜色，以便于移出时恢复
                    options.oldColor = $(this).css('background');
                    $(this).css( 'background', options.activeColor );
                });
                $(thisTable).find('tr').bind('mouseout', function () {
                    $(this).css( 'background', options.oldColor );
                })
            }
        })
    }
})(jQuery);

复制代码

到这里，就基本完成了，最后在插件上方，写上插件的名称、版本号、完成日期、作者，作者的联系方式……等等，因为只有这样才能显的这个插件够专业。

复制代码

/*
 * tableUI 0.1
 * Copyright (c) 梦幻飞雪  http://www.cnblogs.com/wangyihong/
 * Date: 2017-06-28
 * 使用tableUI可以方便地将表格提示使用体验。先提供的功能有奇偶行颜色交替，鼠标移上高亮显示 */(function ($) {
    $.fn.tableUI = function ( options ) {        var defaults = {
            evenColor: '#dddddd', //偶数行颜色
            oddColor: '#ffffff',  //奇数行颜色
            activeColor: '#09f', //激活行颜色
            changeFlag: true,     //是否开启隔行变色
            oldColor: ''
        }        var options = $.extend( defaults, options );        return this.each(function () {            var thisTable = $(this);            if ( options.changeFlag ) {                //奇偶行颜色
                $(thisTable).find('tr:even').css( 'background', options.evenColor );
                $(thisTable).find('tr:odd').css( 'background', options.oddColor );                //激活行颜色
                $(thisTable).find('tr').bind('mouseover', function () {                    //保存原来的颜色，以便于移出时恢复
                    options.oldColor = $(this).css('background');
                    $(this).css( 'background', options.activeColor );
                });
                $(thisTable).find('tr').bind('mouseout', function () {
                    $(this).css( 'background', options.oldColor );
                })
            }
        })
    }
})(jQuery);

复制代码

ok，大功告成，就差验证使用了

复制代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset=>
        <title></title>
        <script src=></script>
        <script src=></script>
        <style>
            *-sizing: border--webkit-box-sizing: border--moz-box-sizing: border----</style>
    </head>
    <body>
        <table id= >
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>专业</th>
                <th>班级</th>
            </tr>
            <tr>
                <td>张三</td>
                <td></td>
                <td>计算机</td>
                <td></td>
            </tr>
            <tr>
                <td>张三</td>
                <td></td>
                <td>计算机</td>
                <td></td>
            </tr>
            <tr>
                <td>张三</td>
                <td></td>
                <td>计算机</td>
                <td></td>
            </tr>
            <tr>
                <td>张三</td>
                <td></td>
                <td>计算机</td>
                <td></td>
            </tr>
            <tr>
                <td>张三</td>
                <td></td>
                <td>计算机</td>
                <td></td>
            </tr>
            <tr>
                <td>张三</td>
                <td></td>
                <td>计算机</td>
                <td></td>
            </tr>
            <tr>
                <td>张三</td>
                <td></td>
                <td>计算机</td>
                <td></td>
            </tr>
        </table>
　　　　　　//插件使用
        <script></script>
    </body>
</html>

复制代码

设置新的属性参数

复制代码

        <script>=, 
                    oddColor: ,  
                    activeColor: , 
                    changeFlag: ,     </script>

//此处options = 也可以不写

复制代码