首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

设立表格隔行显示和选中行样式的插件

2012-10-27 
设置表格隔行显示和选中行样式的插件jquery.altertrstyle.js API:alterTrStyle(options)设置表格隔行显示

设置表格隔行显示和选中行样式的插件
jquery.altertrstyle.js API:


alterTrStyle(options)

设置表格隔行显示和选中行样式效果,并且增加checkbox和radio选中效果。

返回值:jQuery
参数:
    options(Map):(可选)设置隔行显示和选中效果的css类集,格式为 {odd:"css类名", even:"css类名", selected:"css类名"}, Map建名必须为odd、even、selected,如果此参数未给定则css样式表中的css类名必须为odd、even、selected才能达到效果。

---

源码:

Js代码
;(function($){  
    $.fn.extend({  
        "alterTrStyle":function(options){  
        //设置默认值  
        options=$.extend({  
            odd:"odd",  
            even:"even",  
            selected:"selected" 
        },options);  
          
        var oddTr;  
        var evenTr;  
        var Tr;  
        var initSelectedTr;  
          
        if($("tbody").length>0){  
            oddTr = $("tbody>tr:odd",this);  
            evenTr = $("tbody>tr:even",this);  
            Tr = $("tbody>tr",this);  
            initSelectedTr = $("tbody>tr:has(:checked)",this);  
        }else{  
            oddTr = $("tr:odd",this);  
            evenTr = $("tr:even",this);  
            Tr = $("tr",this);  
            initSelectedTr = $("tr:has(:checked)",this);  
        }  
        //设置隔行变色  
        oddTr.addClass(options.odd);  
        evenTr.addClass(options.even);  
        //选中变色  
        Tr.click(function(){  
            //判断当前是否被选中  
            var hasSelected = $(this).hasClass(options.selected);  
            if($(this).find(':checkbox').length>0){  
                //如果选中,则移除selected类,否则就加上selected类  
                $(this)[hasSelected?"removeClass":"addClass"](options.selected)  
                .find(':checkbox').attr('checked',!hasSelected);  
                return;  
            }  
            if($(this).find(':radio').length>0){  
                $(this).addClass(options.selected)  
                .find(':radio').attr('checked',true).end()  
                .siblings(':has(:radio)').removeClass(options.selected)  
                .find(':radio').attr('checked',false);  
                return;  
            }  
            $(this)[hasSelected?"removeClass":"addClass"](options.selected);  
        });  
        //如果单选框默认是选中的,则高亮  
        initSelectedTr.addClass(options.selected);  
        return this;  
    }  
    });  
})(jQuery); 

热点排行