欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery-对列表的操作

程序员文章站 2022-04-10 21:07:10
主要是通过对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>

 

结果

jQuery-对列表的操作