jquery表格隔行变色插件

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

//插件代码
;(function($){
    $.fn.extend({
        "alterBgColor":function(options){
            options = $.extend({
                "odd":"odd",//偶数行的class
                "even":"even",//奇数行class
                "selected":"selected"//被点击行class
            },options);//传入的class参数替换默认的class设置
            console.info(options)
            $("tbody tr:odd").addClass(options.odd);//偶数行设置class
            $("tbody tr:even").addClass(options.even);//奇数行设置class
            $("tbody tr").click(function(){//table行的点击事件
                //当前点击行添加selected样式，其他行去除selected样式，end()指的是对象又为$(this)，该行的radio被选中
                $(this).addClass(options.selected).siblings().removeClass(options.selected).end().find(":radio").attr("checked",true);
            });
            //页面载入时默认选中行的样式
            $("table :radio:checked").closest("tr").addClass(options.selected);
            return this;//返回this,使方法具有可链性
        }
    })
})(jQuery);

样式：

        table{
            border: 1px gray solid;
            width: 500px;
            height: 400px;
            text-align: center;
            margin: 0 auto;
        }
        .odd{background-color: gainsboro;}
        .even{background-color: #FFFFEE}
        .selected{background-color:gold}

html：

<table>
        <thead>
        <tr>
            <th></th>
            <th>姓名</th>
            <th>性别</th>
            <th>暂住地</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td><input type="radio" name="radio"></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>

        <tr>
            <td><input type="radio" name="radio"></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td><input type="radio" name="radio"></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td><input type="radio" name="radio"></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td><input type="radio" name="radio"></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td><input type="radio" name="radio"></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td><input type="radio" name="radio"></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td><input type="radio" name="radio"></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        </tbody>
    </table>

$(function(){
            $("table").alterBgColor();//调用插件，可以自己制定样式，以"{}"对象参数的方式传递
        });

注意：页面需首先引入jquery库

　　jquery的选择符可能会匹配1个或多个元素，因此，插件必须考虑这些情况。可以在插件内部调用each()方法来遍历匹配元素，然后执行相应的方法，this会依次引用每个dom元素

　　如下jquery代码所示：

;(function($){
    $.fn.extend({
        "pluginName" : function(options){
            return this.each(function(){
                //这里放置插件代码
            });
        }
    });
})(jQuery);)

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jquery表格隔行变色插件