AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

jQuery 表格应用：隔行变色，展开关闭，内容筛选

2017-11-14 1301
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

应用一：表格隔行变色


1、普通的隔行变色：


需要用到的 API

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

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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
< html >
< head  lang = "en" >
     < meta  charset = "UTF-8" >
     < title ></ title >
     < style >
         table{
             border-collapse: collapse;
         }
         th, td{
             width:100px;
             border:1px solid #ddd;
             text-align:center;
         }
 
         .even{background:#fff38f;}
         .odd{background:#ffe;}
         .selected{background:#ae0;}
     </ style >
</ head >
< body >
< div >
     筛选：< input  type = "text"  id = "#filterName" >
</ div >
< table >
     < thead >
     < tr >
         < th >下单时间</ th >
         < th >产品名称</ th >
         < th >订单金额</ th >
     </ tr >
     </ thead >
     < tbody >
     < tr >
         < td >2013-04-26</ td >
         < td >海尔电冰箱</ td >
         < td >3688</ td >
     </ tr >
     < tr >
         < td >2014-11-11</ td >
         < td >格力空调</ td >
         < td >5689</ td >
     </ tr >
     < tr >
         < td >2015-01-14</ td >
         < td >美的电饭煲</ td >
         < td >452</ td >
     </ tr >
     < tr >
         < td >2016-08-26</ td >
         < td >小米净化器</ td >
         < td >2258</ td >
     </ tr >
     < tr >
         < td >2016-12-12</ td >
         < td >苹果6 plus</ td >
         < td >5688</ td >
     </ tr >
     </ tbody >
</ table >
 
 
< script  src = "js/jquery-1.8.3.min.js" ></ script >
< script >
     $(function(){
         //隔行变色
         $('tbody>tr:odd').addClass('odd');
         $('tbody>tr:even').addClass('even');
         //某一行变为高亮显示状态
         $('tr:contains("下单")').addClass('selected')
     })
</ script >
</ body >
</ html >


页面效果：

wKiom1hHwI-gybUoAAATwSWqsQ8568.png

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


需要用到的API

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
< html >
< head  lang = "en" >
     < meta  charset = "UTF-8" >
     < title ></ title >
     < style >
         table{
             border-collapse: collapse;
         }
         th, td{
             width:100px;
             border:1px solid #ddd;
             text-align:center;
         }
 
         .even{background:#fff38f;}
         .odd{background:#ffe;}
         .selected{background:#ae0;}
     </ style >
</ head >
< body >
< div >
     筛选：< input  type = "text"  id = "#filterName" >
</ div >
< table >
     < thead >
     < tr >
         < th ></ th >
         < th >下单时间</ th >
         < th >产品名称</ th >
         < th >订单金额</ th >
     </ tr >
     </ thead >
     < tbody >
     < tr >
         < td >< input  type = "radio"  checked></ td >
         < td >2013-04-26</ td >
         < td >海尔电冰箱</ td >
         < td >3688</ td >
     </ tr >
     < tr >
         < td >< input  type = "radio" ></ td >
         < td >2014-11-11</ td >
         < td >格力空调</ td >
         < td >5689</ td >
     </ tr >
     < tr >
         < td >< input  type = "radio" ></ td >
         < td >2015-01-14</ td >
         < td >美的电饭煲</ td >
         < td >452</ td >
     </ tr >
     < tr >
         < td >< input  type = "radio" ></ td >
         < td >2016-08-26</ td >
         < td >小米净化器</ td >
         < td >2258</ td >
     </ tr >
     < tr >
         < td >< input  type = "radio" ></ td >
         < td >2016-12-12</ td >
         < td >苹果6 plus</ td >
         < td >5688</ td >
     </ tr >
     </ tbody >
</ table >
 
 
< script  src = "js/jquery-1.8.3.min.js" ></ script >
< script >
     $(function(){
         //点击行变色
         $('tbody>tr').click(function(){
             $(this).addClass('selected').siblings('.selected').removeClass('selected').end() //切换点击变色
                     .find(':radio').attr('checked',true).end()  //点到一行的同时让对应的单选框选中
                     .siblings().find(':radio').attr('checked',false);  //其他行的单选框取消选中
         });
 
         //默认选中的行变色
         $('tbody>tr:has(:checked)').addClass('selected');
     })
</ script >
</ body >
</ html >


页面效果：

wKioL1hHyLiw_pOYAAcwkch12yk694.gif



3、复选框控制表格高亮


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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
< html >
< head  lang = "en" >
     < meta  charset = "UTF-8" >
     < title ></ title >
     < style >
         table{
             border-collapse: collapse;
         }
         th, td{
             width:100px;
             border:1px solid #ddd;
             text-align:center;
         }
 
         .even{background:#fff38f;}
         .odd{background:#ffe;}
         .selected{background:#ae0;}
     </ style >
</ head >
< body >
< div >
     筛选：< input  type = "text"  id = "#filterName" >
</ div >
< table >
     < thead >
     < tr >
         < th ></ th >
         < th >下单时间</ th >
         < th >产品名称</ th >
         < th >订单金额</ th >
     </ tr >
     </ thead >
     < tbody >
     < tr >
         < td >< input  type = "checkbox"  checked></ td >
         < td >2013-04-26</ td >
         < td >海尔电冰箱</ td >
         < td >3688</ td >
     </ tr >
     < tr >
         < td >< input  type = "checkbox" ></ td >
         < td >2014-11-11</ td >
         < td >格力空调</ td >
         < td >5689</ td >
     </ tr >
     < tr >
         < td >< input  type = "checkbox" ></ td >
         < td >2015-01-14</ td >
         < td >美的电饭煲</ td >
         < td >452</ td >
     </ tr >
     < tr >
         < td >< input  type = "checkbox" ></ td >
         < td >2016-08-26</ td >
         < td >小米净化器</ td >
         < td >2258</ td >
     </ tr >
     < tr >
         < td >< input  type = "checkbox" ></ td >
         < td >2016-12-12</ td >
         < td >苹果6 plus</ td >
         < td >5688</ td >
     </ tr >
     </ tbody >
</ table >
 
 
< script  src = "js/jquery-1.8.3.min.js" ></ script >
< script >
     $(function(){
         //点击行变色
         $('tbody>tr').click(function(){
             //判断当前是否选中 -> boolean
             var hasSelected = $(this).hasClass('selected');
             //如果选中，则移除 selected 类，否则就加上 selected。使用三目运算
             $(this)[hasSelected?'removeClass':'addClass']('selected')
                     //查找当前行内的 checkbox 属性，选中则去掉，未勾选则选中
                     .find(':checked').attr('checked',!hasSelected);
         });
 
         //默认选中的行变色
         $('tbody>tr:has(:checked)').addClass('selected');
 
     })
</ script >
</ body >
</ html >


效果：

wKioL1hHzpaAXyw_AAzwwR4p3lU498.gif



应用二：表格展开/关闭


需要用到的API

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


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

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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
< html >
< head  lang = "en" >
     < meta  charset = "UTF-8" >
     < title ></ title >
     < style >
         table{
             border-collapse: collapse;
         }
         th, td{
             width:100px;
             border:1px solid #ddd;
             text-align:center;
         }
 
         .even{background:#fff38f;}
         .odd{background:#ffe;}
         .selected{background:#ae0;}
     </ style >
</ head >
< body >
< div >
     筛选：< input  type = "text"  id = "#filterName" >
</ div >
< table >
     < thead >
     < tr >
         < th >下单时间</ th >
         < th >产品名称</ th >
         < th >订单金额</ th >
     </ tr >
     </ thead >
     < tbody >
     < tr  class = "parent"  id = "row_01" >< td  colspan = "3" >大家电系列</ td ></ tr >
     < tr  class = "child_row_01" >
         < td >2013-04-26</ td >
         < td >海尔电冰箱</ td >
         < td >3688</ td >
     </ tr >
     < tr  class = "child_row_01" >
         < td >2014-11-11</ td >
         < td >格力空调</ td >
         < td >5689</ td >
     </ tr >
     < tr  class = "child_row_01" >
         < td >2015-01-14</ td >
         < td >美的电饭煲</ td >
         < td >452</ td >
     </ tr >
     < tr  class = "parent"  id = "row_02" >< td  colspan = "3" >小家电系列</ td ></ tr >
     < tr  class = "child_row_02" >
         < td >2016-08-26</ td >
         < td >小米净化器</ td >
         < td >2258</ td >
     </ tr >
     < tr  class = "child_row_02" >
         < td >2016-06-26</ td >
         < td >九阳豆浆机</ td >
         < td >258</ td >
     </ tr >
     < tr  class = "parent"  id = "row_03" >< td  colspan = "3" >手机系列</ td ></ tr >
     < tr  class = "child_row_03" >
         < td >2016-12-12</ td >
         < td >苹果6 plus</ td >
         < td >5688</ td >
     </ tr >
     < tr  class = "child_row_03" >
         < td >2016-12-30</ td >
         < td >苹果7 plus</ td >
         < td >7688</ td >
     </ tr >
     </ tbody >
</ table >
 
 
< script  src = "js/jquery-1.8.3.min.js" ></ script >
< script >
     $(function(){
         $('tr.parent').click(function(){  //获取父行
             $(this).toggleClass('selected')  //添加/删除高亮
                     .siblings('.child_'+this.id).toggle();  //显示/隐藏子行
         })
 
     })
</ script >
</ body >
</ html >


效果：

wKioL1hH0tnBHKcBAAhaf1YJs9Q309.gif



应用三：表格内容筛选


需要用到的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 事件。它发生在当前获得焦点的元素上


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
< html >
< head  lang = "en" >
     < meta  charset = "UTF-8" >
     < title ></ title >
     < style >
         table{
             border-collapse: collapse;
         }
         th, td{
             width:100px;
             border:1px solid #ddd;
             text-align:center;
         }
     </ style >
</ head >
< body >
< div >
     筛选：< input  type = "text"  id = "filterName" >
</ div >
< table >
     < thead >
     < tr >
         < th >下单时间</ th >
         < th >产品名称</ th >
         < th >订单金额</ th >
     </ tr >
     </ thead >
     < tbody >
     < tr >
         < td >2013-04-26</ td >
         < td >海尔电冰箱</ td >
         < td >3688</ td >
     </ tr >
     < tr >
         < td >2014-11-11</ td >
         < td >格力空调</ td >
         < td >5689</ td >
     </ tr >
     < tr >
         < td >2015-01-14</ td >
         < td >美的电饭煲</ td >
         < td >452</ td >
     </ tr >
     < tr >
         < td >2016-08-26</ td >
         < td >小米净化器</ td >
         < td >2258</ td >
     </ tr >
     < tr >
         < td >2016-12-12</ td >
         < td >苹果6 plus</ td >
         < td >5688</ td >
     </ tr >
     </ tbody >
</ table >
 
 
< script  src = "js/jquery-1.8.3.min.js" ></ script >
< script >
     $("#filterName").keyup(function(){
         $("table tbody tr")
                 .hide()
                 .filter(":contains('"+( $(this).val().trim() )+"')") //注意contains内部的空格和字符串的拼接
                 .show();
     }).keyup();
</ script >
</ body >
</ html >


效果：

wKiom1hIxu_zUGdGAAhJfsk1LVY598.gif

本文转自   frwupeng517   51CTO博客，原文链接:http://blog.51cto.com/dapengtalk/1880635




文章标签：
Web App开发
JavaScript
API
关键词：
jQuery应用
jQuery表格
jquery筛选
jQuery隔行变色
jQuery表格变色
技术小牛人
目录
相关文章
1024小神
|
7月前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
1024小神
62 1
冷水鱼。
|
7月前
|
开发框架 前端开发 JavaScript
使用JavaScript、jQuery和Bootstrap构建待办事项应用
使用JavaScript、jQuery和Bootstrap构建待办事项应用
冷水鱼。
117 0
2019ab
|
7月前
|
JavaScript 前端开发
jQuery第一天---六大功能的简单应用
jQuery第一天---六大功能的简单应用
2019ab
58 0
祈澈菇凉
|
JavaScript 前端开发 开发者
jQuery文档对象模型DOM的实际应用
jQuery文档对象模型DOM的实际应用
祈澈菇凉
54 0
不念那年晚春
|
JavaScript
jQuery筛选&文档处理
jQuery筛选&文档处理
不念那年晚春
43 0
云小君
|
JavaScript
jQuery筛选&文档处理器
jQuery筛选&文档处理器
云小君
54 0
今天是几号
|
6月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
今天是几号
53 5
zrblue
|
7月前
|
JSON 缓存 前端开发
Jquery中AJAX的应用
Jquery中AJAX的应用
zrblue
79 0
王同学睡醒了
|
JavaScript
jQuery学习（一）—jQuery应用步骤以及ready事件和load事件的区别
jQuery学习（一）—jQuery应用步骤以及ready事件和load事件的区别
王同学睡醒了
48 0
camellia。
|
XML JavaScript 小程序
使用jquery treetable 实现树形表格拖拽
这里记录一下使用jquery treetable时遇到的坑。 我这里的需求是做一个树形表格，并且可拖拽。 最后要实现的效果大概是这样的：（文末有实例）
camellia。
53 0