-
Notifications
You must be signed in to change notification settings - Fork 0
/
表格.html
176 lines (162 loc) · 4.24 KB
/
表格.html
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.datalist{border:1px solid #ccc;border-collapse:collapse;width:100%;}
.datalist thead tr{background-color:#dfdfdf;}
td,th{border:1px solid #ccc;padding:5px 10px;}
.odd{background-color:#efefef;}
.selected{background-color: #fc0;color:#fff;}
</style>
<script src="libs/libs/jquery-2.1.1.min.js"></script>
<script>
$(function(){
/*
思路：
1、全选/不选
2、反选
3、点击任意地方选取
4、查找选取
5、全选状态修改
*/
// 获取页面元素
var $tr = $('tbody tr');
var $checkbox = $('tbody :checkbox');
var $btnFx = $('#btnFx');
var $all = $('#all');
//查找按钮
var $username = $('#username') // 输入框
var $btn = $username.next(); //查找按钮
//$tr 绑定事件
//js 原生js绑定点击事件
// $tr[0].onclick = function(){
// this
// }
//click()jq的方法 给所有匹配成功的js对象绑定点击事件的方法
//点击任意位置选取
$tr.click(function(){
//this 是一个js对象
//this 是调用方法的对象
console.log('click')
//toggleClass 切换样式 jq方法
//$(this) 转换成jq对象
$(this).toggleClass('selected');
//find() 查找子节点
$(this).find(':checkbox').prop( 'checked', $(this).hasClass('selected') );
pAll()//判断全选按钮的状态
})
//反选
$btnFx.click(function(){
//两种思想
//第一种 先改变当前checkbox的勾选状态
//根据checkbox的 状态去改变tr
//第二种 先切换tr的样式 根据tr的样式取改变checkbox的状态
//无论是第一种还是第二种都需要遍历
$checkbox.prop('checked',function(index ,old){
this.checked?$(this).closest('tr').removeClass('selected'):$(this).closest('tr').addClass('selected')
return !old
})
pAll()//判断全选按钮的状态
})
//全选 /全不选
$all.click(function(){
//记一下 以后会很有用
$checkbox.prop('checked',this.checked);
var mothd = this.checked? "addClass":'removeClass';
//console.log($tr[mothd]);
$tr[mothd]('selected');
})
//全选状态的修改
//修改全选按钮的状态
function pAll(){
//修改成 三目运算的形式
var cleng = $checkbox.length;
var lenged = $('tbody :checked').length;
if(cleng==lenged){
$all.prop('checked',true)
}else{
$all.prop('checked',false)
}
}
//查找修改
$btn.click(function(){
var name = $username.val();
if(name!=""){
//修改所有的状态
$tr.removeClass('selected');
$checkbox.prop('checked',false);
//多多思考
$('tbody tr:contains('+name+')').addClass('selected').find(':checkbox').prop('checked',true);
}
})
});
</script>
</head>
<body>
<button>第1行</button>
<button>最后1行</button>
<button>前3行</button>
<button>后3行</button>
<button>第4-6行</button>
<button>第8行</button>
<input type="text" id="username"><button>查找</button>
<button id="btnFx">反选</button>
<table class="datalist">
<thead>
<tr>
<th width="20"><input type="checkbox" id="all"></th>
<th>姓名</th>
<th>昵称</th>
<th>性别</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>刘备</td>
<td>小刘</td>
<td>男</td>
<td>撩妹，装逼，编草鞋</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>关羽</td>
<td>关二</td>
<td>男</td>
<td>耍大刀，变脸，喝酒</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>张飞</td>
<td>张三</td>
<td>男</td>
<td>打架，喝酒，耍流氓</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>赵云</td>
<td>赵四</td>
<td>男</td>
<td>打架，喝酒，耍帅</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>貂蝉</td>
<td>美女</td>
<td>女</td>
<td>撩汉，化妆</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>小乔</td>
<td>乔二</td>
<td>女</td>
<td>弹琴，唱歌，撩周瑜</td>
</tr>
</tbody>
</table>
</body>
</html>