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

效果：