码迷,mamicode.com
首页 > Web开发 > 详细

jquery表格隔行变色插件

时间:2014-10-21 16:53:44      阅读:266      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   io   os   ar   sp   div   on   

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

 

jquery表格隔行变色插件

标签:style   blog   color   io   os   ar   sp   div   on   

原文地址:http://www.cnblogs.com/zhangyanlei183/p/4040535.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!