jQuery-对列表的操作

发布时间:2019-06-20 06:00:04发布者:Mr.Zhang阅读(212)

主要是通过对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>

 

结果





本文转自博客园,原文地址:https://www.cnblogs.com/tynam/p/11055370.html