jQuery表格应用:隔行变色,展开关闭,内容筛选-创新互联
应用一:表格隔行变色
成都创新互联公司是一家专业的成都网站建设公司,我们专注成都网站设计、成都做网站、外贸网站建设、网络营销、企业网站建设,卖链接,广告投放为企业客户提供一站式建站解决方案,能带给客户新的互联网理念。从网站结构的规划UI设计到用户体验提高,创新互联力求做到尽善尽美。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许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
文章名称:jQuery表格应用:隔行变色,展开关闭,内容筛选-创新互联
转载源于:http://pwwzsj.com/article/djopci.html