jquery表格隔行变色插件

//插件代码
;(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>

 

<script>中的代码

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

 

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

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

  如下jquery代码所示:

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

 

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