`
zhaoshijie
  • 浏览: 2261598 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

    博客分类:
  • JS
阅读更多
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); 
分享到:
评论

相关推荐

    表头拖动效果|表格隔行换色效果|大气的表格样式|选择行底色突出显示

    2. **表格隔行换色效果**:也称为交错行颜色或Zebra Striping,这是一种常见的优化可读性的设计技巧。通过在交替的行中使用不同的背景色,可以更轻松地引导用户的眼睛跟踪行间的差异,尤其是当数据量较大时。实现这...

    基于Jquery的表格隔行换色,移动换色,点击换色插件

    标题和描述中提到的知识点主要集中在如何使用jQuery来实现表格的动态样式变化功能,包括隔行换色、移动换色以及点击换色。首先,我们将介绍这些效果的实现原理和技术细节。 ### 1. jQuery基础知识 jQuery是一个快速...

    jquery隔行换色和鼠标经过样式和标题提示效果.rar

    在网页设计中,为了提升用户体验和视觉效果,经常会使用到jQuery技术来实现一些动态功能,如隔行换色、鼠标经过样式变化以及标题提示效果。这些功能可以使网页更具交互性,增强用户对信息的感知。 首先,让我们了解...

    使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条

    在本文中,我们将讨论如何利用 Bootstrap 实现表格隔行变色、hover 变色以及在需要时显示滚动条的效果。 首先,为了实现这些功能,我们需要引入 Bootstrap 的 CSS 和 JavaScript 文件。在 HTML 文档的 `<head>` ...

    jquery table鼠标滑过隔行变色表格样式代码

    可以使用 `nth-child(odd)` 和 `nth-child(even)` 选择器来选中表格的奇数行和偶数行,并分别设置不同的背景颜色。例如: ```css tr:nth-child(odd) { background-color: #f2f2f2; } tr:nth-child(even) { ...

    创建自己的jquery表格插件

    3. **CSS样式**:编写`.mouseover`类来设置悬停时的样式,如背景色和文字颜色。 ### HTML/CSS布局 表格插件还需要遵循良好的HTML结构和CSS样式规范,这些内容包括: 1. **HTML结构**:合理的表格结构,如`thead`,...

    Jquery插件-table

    *插件名:表格(table)优化器 *功能对照表: * 名称 参数 参数描叙 方法描叙 类型 ====>数据加载 * loadData dataSource, 数据源 数据加载JSON或者Array 功能 isTh 是否包含TH文件头 ====>数据...

    jQuery 隔行换色 支持键盘上下键,按Enter选定值

    隔行换色是一种常见的表格美化技术,通过改变奇偶行的背景色,使得表格内容更易读,提高用户体验。在给出的代码中,CSS 类`.datagrid` 和相关的样式定义了表格的基本样式。`.datagrid tr` 是表格行的基础样式,`....

    自己挑选的几个Jquery特效

    这里我们关注的是几个与jQuery特效相关的资源,包括菜单、表格样式和树形列表等。以下是对这些特效的详细介绍: 1. **jQuery基础教程 - hover用法**: 这个文件涉及jQuery中的`hover`方法,它允许我们在鼠标进入和...

    Word、Excel、PPT使用技巧与实战方法大全

    - 在表格上方插入一行作为标题行,选中该行后设置为“标题行重复”。 **25. 快速打印WordXP的快捷键列表** - 使用“文件”>“打印”命令,在打印对话框中选择“快捷键列表”作为打印内容。 **26. 公式的颜色也能...

    Word、Excel、PPT使用技巧与实战方法大全(2010完整版).docx

    - 选中表头行,使用“表格工具”下的“设计”选项卡中的“重复标题行”功能。 **38. 在Word中巧划线** - 使用“插入”选项卡下的“形状”功能绘制直线或曲线。 - 也可以使用“边框”功能添加线条。 **39. 打造...

    Word、Excel、PPT使用技巧与实战方法大全(2010完整版

    使用冻结窗格功能(`Ctrl+F8`),可以固定显示表格的第一行或前几行。 38. **在Word中巧划线** 使用“绘图”工具中的“直线”工具绘制直线。 39. **打造Word右键菜单** 通过“文件”>“选项”>“高级”中的...

    office使用技巧大全(史上最全)

    - 选中需要隔行删除的文本,使用查找与替换功能,将查找内容设置为“^p^p”(其中^p代表回车符),替换为空即可实现隔行删除。 **4. 清除Word文档中多余的空行** - 同样利用查找与替换功能,查找内容设置为“^p{2,}...

    Excel_word_ppt_office使用技巧大全

    - 选择表格的第一行,然后在“布局”选项卡下的“数据”组中选择“冻结标题行”功能。 **25. 快速打印 Word XP 的快捷键列表** - 使用 `Alt + Ctrl + P` 快速调出打印对话框。 **26. 公式的颜色也能变** - 选中...

    OFFICE2010使用技巧与实战方法大全(2010完整版

    - 选择表格标题行,然后在“布局”选项卡中选择“冻结标题”功能。 **25. 快速打印WordXP的快捷键列表** - 在Word中,可以通过“文件”>“选项”>“自定义功能区”找到快捷键列表,并将其打印出来。 **26. 公式的...

Global site tag (gtag.js) - Google Analytics