首页 > 代码库 > 自己编写jQuery插件 之 表格样式(银光棒)

自己编写jQuery插件 之 表格样式(银光棒)

又来吐嘈了,实在是忍不住:换工作以来的第一次上班迟到。早上坐车,坐了4站路发现路线不对,问司机,司机说从今天起换路线了。尼玛,立马下车换乘。换了车,开了2站路,车子坏了,再次被迫下车。就近站牌等车,第一次车没靠站,直接走了,第二次很挤,没法还得上。终于到了公司楼下,fuck,电梯坏了,最终我迟到了......一个美好的早晨,我就这样被老天爷给轮了!

 

先上图:

 

上面这张图有3种状态,默认状态(灰白相间),鼠标悬浮状态(绿色),鼠标点击状态(黄色)。

 

Html代码如下:

<table>        <thead>            <tr>                <td>编号</td>                <td>姓名</td>                <td>年龄</td>                <td>操作</td>            </tr>        </thead>        <tbody>            <tr>                <td>1111</td>                <td>1111</td>                <td>1111</td>                <td><input type="button" value="查看" /><input type="button" value="删除" /></td>            </tr>            <tr>                <td>2222</td>                <td>2222</td>                <td>2222</td>                <td><input type="button" value="查看" /><input type="button" value="删除" /></td>            </tr>            <tr>                <td>3333</td>                <td>3333</td>                <td>3333</td>                <td><input type="button" value="查看" /><input type="button" value="删除" /></td>            </tr>            <tr>                <td>4444</td>                <td>4444</td>                <td>4444</td>                <td><input type="button" value="查看" /><input type="button" value="删除" /></td>            </tr>            <tr>                <td>5555</td>                <td>5555</td>                <td>5555</td>                <td><input type="button" value="查看" /><input type="button" value="删除" /></td>            </tr>        </tbody></table>

 

 

插件实现代码如下:

(function () {            $.fn.TabStyle = function (options) {                //默认参数设置                var settings = {                    evenClass: "tab_even",      //偶数行样式                    oddClass: "tab_odd",        //奇数行样式                    hoverClass: "tab_hover",    //鼠标悬浮样式                    clickClass: "tab_click",    //鼠标点击样式                    isClick: true               //是否开启鼠标点击样式                };                //合并参数                $.extend(settings, options);                return this.each(function () {                    //为奇偶行分别添加样式                    $(" > tbody > tr:even", this).addClass(settings.evenClass);                    $(" > tbody > tr:odd", this).addClass(settings.oddClass);                    $(" > tbody > tr", this).each(function (i) {                        //鼠标悬浮样式                        $(this).hover(function () {                            $(this).addClass(settings.hoverClass);                        }, function () {                            $(this).removeClass(settings.hoverClass);                        });                        //鼠标点击样式                        if (settings.isClick) {                            $(this).bind("click", function () {                                $(this).addClass(settings.clickClass).siblings("tr").removeClass(settings.clickClass);                            });                        }                    });                });            }})();

有些时候我们可能并不需要鼠标点击后的样式,因此设置了isClick这个作为控制开关。如果不想要点击样式,将其设置为false即可。

 

DEMO如下:

<html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>表格样式(银光棒)</title>    <style type="text/css">        table{ width:700px; border:1px solid green;border-collapse:collapse;}        table td{height:40px; text-align:center; width:25%;}                .tab_even{ background-color: #DDD;}        .tab_odd{ background-color: White;}        .tab_hover{ background-color: Green;color:White;}        .tab_click{ background-color: Orange;}    </style></head><body>    <table>        <thead>            <tr>                <td>编号</td>                <td>姓名</td>                <td>年龄</td>                <td>操作</td>            </tr>        </thead>        <tbody>            <tr>                <td>1111</td>                <td>1111</td>                <td>1111</td>                <td><input type="button" value="查看" /><input type="button" value="删除" /></td>            </tr>            <tr>                <td>2222</td>                <td>2222</td>                <td>2222</td>                <td><input type="button" value="查看" /><input type="button" value="删除" /></td>            </tr>            <tr>                <td>3333</td>                <td>3333</td>                <td>3333</td>                <td><input type="button" value="查看" /><input type="button" value="删除" /></td>            </tr>            <tr>                <td>4444</td>                <td>4444</td>                <td>4444</td>                <td><input type="button" value="查看" /><input type="button" value="删除" /></td>            </tr>            <tr>                <td>5555</td>                <td>5555</td>                <td>5555</td>                <td><input type="button" value="查看" /><input type="button" value="删除" /></td>            </tr>        </tbody>    </table>    <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>    <script src="../Scripts/jquery.similar.TabStyle.js" type="text/javascript"></script>    <script type="text/javascript">        $("table").TabStyle();    </script></body></html>

 

自己编写jQuery插件 之 表格样式(银光棒)