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 |
效果：