自己编写jQuery插件之表格样式（银光棒）

浏览数：33 / 时间：2015年06月09日

又来吐嘈了，实在是忍不住：换工作以来的第一次上班迟到。早上坐车，坐了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>