jQuery-对列表的操作
程序员文章站
2022-07-11 16:56:18
主要是通过对dom元素的增加和删除实现对数据增加和删除 结果 ......
主要是通过对dom元素的增加和删除实现对数据增加和删除
1 <!doctype html>
2 <html lang="en">
3
4 <head>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="x-ua-compatible" content="ie=edge">
8 <title>document</title>
9 <script src="jquery-3.4.1.js"></script>
10 <style type="text/css">
11 * {
12 margin: 0;
13 padding: 0;
14 }
15
16 a {
17 text-decoration: none;
18 }
19
20 input {
21 outline: none;
22 font-size: 16px;
23 box-sizing: border-box;
24 border: aliceblue solid .5px;
25 }
26
27 body {
28 margin: 30px auto;
29 width: 510px;
30 }
31
32 .btn {
33 width: 80px;
34 height: 30px;
35 position: relative;
36 left: 380px;
37 margin-bottom: 10px;
38 }
39
40 .btn button {
41 width: 80px;
42 height: 30px;
43 background: #3ca7ed;
44 color: aliceblue;
45 font-size: 16px;
46 outline: none;
47 border-style: none;
48 }
49
50 .btn button:hover {
51 background: #0a84d4;
52 }
53
54 table {
55 border: solid aliceblue 1px;
56 border-collapse: collapse;
57 }
58
59 .code,
60 .name,
61 .sex,
62 .grader,
63 .del a,
64 input {
65 width: 100px;
66 height: 30px;
67 line-height: 30px;
68 padding-left: 5px;
69 }
70
71 tbody tr:nth-child(even) {
72 background: aliceblue;
73 }
74
75 .header {
76 background: #3ca7ed;
77 color: aliceblue;
78 }
79
80 .del a {
81 text-align: right;
82 padding-right: 5px;
83 color: #3ca7ed;
84 }
85
86 .opr a {
87 font-size: 16px;
88 color: #3ca7ed;
89 margin-left: 10px;
90 }
91 </style>
92
93 <style>
94 /* 删除/添加 */
95 .dialog,
96 .add-dialog {
97 display: none;
98 margin: 0 auto;
99 width: 400px;
100 height: 150px;
101 position: absolute;
102 top: 150px;
103 background: aliceblue;
104 text-align: center;
105 line-height: 65px;
106 font-size: 18px;
107 }
108
109 .add-dialog {
110 height: 270px;
111 }
112
113 .add-dialog div {
114 height: 40px;
115 }
116
117 .add-dialog div input {
118 width: 200px;
119 padding: 10px;
120 margin: 10px;
121 }
122
123 .dialog .header,
124 .add-dialog .header {
125 background: #3ca7ed;
126 color: aliceblue;
127 height: 35px;
128 text-align: left;
129 padding-left: 10px;
130 line-height: 35px;
131 }
132
133 .dialog button,
134 .add-dialog button {
135 display: inline-block;
136 width: 50px;
137 height: 30px;
138 background: #3ca7ed;
139 outline: none;
140 color: #f9f9f9;
141 border-style: none;
142 position: absolute;
143 bottom: 10px;
144 right: 10px;
145 }
146
147 .dialog button:hover,
148 .add-dialog button:hover {
149 background: #3ca7ed;
150 ;
151 }
152
153 #confirm {
154 right: 75px;
155 }
156 </style>
157
158 <script>
159 $(function () {
160 // 删除
161 function del_tr() {
162 var $tr = $(this).parent();
163 var code = $tr.children(':first').html();
164 $('.dialog').show();
165 $('.dialog .text').html("确定要删除[" + code + "]吗？");
166
167 $(".dialog #confirm").click(function () {
168 $($tr).remove();
169 $('.dialog').hide();
170 });
171
172 $(".dialog #concel").click(function () {
173 $('.dialog').hide();
174 });
175 };
176
177 $('.del').click(del_tr)
178
179 //添加
180 $('#student-add').click(function () {
181
182 $('.add-dialog').show();
183
184 $('.add-dialog #confirm').unbind('click'); //事件解绑
185 $('.add-dialog #confirm').click(function () {
186 var $code = $('.add-dialog .code');
187 var $name = $('.add-dialog .name');
188 var $sex = $('.add-dialog .sex');
189 var $grader = $('.add-dialog .grader');
190 var del = "<td class='del'><a href='#'>删除</a></td>";
191
192 var code = $code.val();
193 var name = $name.val();
194 var sex = $sex.val();
195 var grader = $grader.val();
196
197 $('<tr></tr>')
198 .append('<td>' + code + '</td>')
199 .append('<td>' + name + '</td>')
200 .append('<td>' + sex + '</td>')
201 .append('<td>' + grader + '</td>')
202 .append(del)
203 .appendto('tbody')
204 .find('.del')
205 .click(del_tr)
206 // 输入框清空
207 $code = $('.add-dialog .code').val('');
208 $name = $('.add-dialog .name').val('');
209 $sex = $('.add-dialog .sex').val('');
210 $grader = $('.add-dialog .grader').val('');
211
212 $('.add-dialog').hide();
213
214 });
215
216 // 添加中取消按钮
217 $(".add-dialog #concel").click(function () {
218 $('.add-dialog').hide();
219
220 // 输入框清空
221 $code = $('.add-dialog .code').val('');
222 $name = $('.add-dialog .name').val('');
223 $sex = $('.add-dialog .sex').val('');
224 $grader = $('.add-dialog .grader').val('');
225 });
226 });
227 });
228 </script>
229 </head>
230
231 <body>
232 <div class="btn">
233 <button id="student-add">添加</button>
234 </div>
235 <table>
236 <tr class="header">
237 <td class="code">学号</td>
238 <td class="name">姓名</td>
239 <td class="sex">性别</td>
240 <td class="grader">年级</td>
241 <td class="del"><a href="#"></a></td>
242 </tr>
243 <tr>
244 <td class="code">30001</td>
245 <td class="name">段瑞琦</td>
246 <td class="sex">男</td>
247 <td class="grader">三年级二班</td>
248 <td class="del"><a href="#">删除</a></td>
249 </tr>
250 <tr>
251 <td class="code">40002</td>
252 <td class="name">韩子萱</td>
253 <td class="sex">女</td>
254 <td class="grader">四年级二班</td>
255 <td class="del"><a href="#">删除</a></td>
256 </tr>
257 <tr>
258 <td class="code">20101</td>
259 <td class="name">严寒</td>
260 <td class="sex">男</td>
261 <td class="grader">二年级一班</td>
262 <td class="del"><a href="#">删除</a></td>
263 </tr>
264 <tr>
265 <td class="code">60012</td>
266 <td class="name">钱小龙</td>
267 <td class="sex">男</td>
268 <td class="grader">六年级六班</td>
269 <td class="del"><a href="#">删除</a></td>
270 </tr>
271 </table>
272 <div class="dialog">
273 <div class="header">删除</div>
274 <div class="text"></div>
275 <button id="confirm">确定</button>
276 <button id="concel">取消</button>
277 </div>
278 <div class="add-dialog">
279 <div class="header">添加</div>
280 <div>学号<input type="text" class="code"></div>
281 <div>姓名<input type="text" class="name"></div>
282 <div>性别<input type="text" class="sex"></div>
283 <div>年级<input type="text" class="grader"></div>
284 <button id="confirm">确定</button>
285 <button id="concel">取消</button>
286 </div>
287 </body>
288
289 </html>
结果