jQuery表格应用：隔行变色，展开关闭，内容筛选-创新互联

应用一：表格隔行变色

1、普通的隔行变色：

需要用到的 API

$(':odd')   --> 匹配所有索引值为奇数的元素，从0开始计数

$(':even')  --> 匹配所有索引值为偶数的元素，从0开始计数

    
    
    



    筛选：


    
    
        
        
        
    
    
    
    
        
        
        
    
    
        
        
        
    
    
        
        
        
    
    
        
        
        
    
    
        
        
        
    
    
下单时间
产品名称
订单金额
2013-04-26
海尔电冰箱
3688
2014-11-11
格力空调
5689
2015-01-14
美的电饭煲
452
2016-08-26
小米净化器
2258
2016-12-12
苹果6 plus
5688

页面效果：

2、单选按钮控制表格行高亮

需要用到的API

end( )    --> 回到最近的一个“破坏性”操作之前，即，将匹配的元素列表变为前一次的状态

:checked  --> 匹配所有选中的被选中元素（复选框、单选按钮等，不包括select 中的option）

$( ':radio' )     --> 匹配所有单选按钮

:has( selector ) --> 用于筛选选择器

    
    
    



    筛选：


    
    
        
        
        
        
    
    
    
    
        
        
        
        
    
    
        
        
        
        
    
    
        
        
        
        
    
    
        
        
        
        
    
    
        
        
        
        
    
    
下单时间
产品名称
订单金额
2013-04-26
海尔电冰箱
3688
2014-11-11
格力空调
5689
2015-01-14
美的电饭煲
452
2016-08-26
小米净化器
2258
2016-12-12
苹果6 plus
5688

页面效果：

3、复选框控制表格高亮

重点注意：三目运算在选择器中的用法

    
    
    



    筛选：


    
    
        
        
        
        
    
    
    
    
        
        
        
        
    
    
        
        
        
        
    
    
        
        
        
        
    
    
        
        
        
        
    
    
        
        
        
        
    
    
下单时间
产品名称
订单金额
2013-04-26
海尔电冰箱
3688
2014-11-11
格力空调
5689
2015-01-14
美的电饭煲
452
2016-08-26
小米净化器
2258
2016-12-12
苹果6 plus
5688

效果：

应用二：表格展开/关闭

需要用到的API

toggleClass( )    --> 如果存在，就删除一个类；如果不存在，就添加一个类

toggle([speed],[easing],[fn]) --> 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。

    
    
    



    筛选：


    
    
        
        
        
    
    
    
    大家电系列
    
        
        
        
    
    
        
        
        
    
    
        
        
        
    
    小家电系列
    
        
        
        
    
    
        
        
        
    
    手机系列
    
        
        
        
    
    
        
        
        
    
    
下单时间
产品名称
订单金额
2013-04-26
海尔电冰箱
3688
2014-11-11
格力空调
5689
2015-01-14
美的电饭煲
452
2016-08-26
小米净化器
2258
2016-06-26
九阳豆浆机
258
2016-12-12
苹果6 plus
5688
2016-12-30
苹果7 plus
7688

效果：

应用三：表格内容筛选

需要用到的API

:contains( text )    --> 匹配包含给定文本的元素

$.trim(str)         --> 去掉字符串起始和结尾的空格

filter(expr|obj|ele|fn)--> 筛选出与指定表达式匹配的元素集合

show([speed,[easing],[fn]])  --> 显示隐藏的匹配元素，无论这个元素是通过 hide( ) 方法隐藏的还是在 CSS里设置了 display: none, 这个方法都有效

hide([speed,[easing],[fn]])   --> 隐藏显示的匹配元素

keyup([[data],fn])  --> 当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上

    
    
    



    筛选：


    
    
        
        
        
    
    
    
    
        
        
        
    
    
        
        
        
    
    
        
        
        
    
    
        
        
        
    
    
        
        
        
    
    
下单时间
产品名称
订单金额
2013-04-26
海尔电冰箱
3688
2014-11-11
格力空调
5689
2015-01-14
美的电饭煲
452
2016-08-26
小米净化器
2258
2016-12-12
苹果6 plus
5688

效果：

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。