码迷,mamicode.com
首页 > Web开发 > 详细

jquery之行自加自减

时间:2019-02-07 10:58:51      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:lock   body   append   col   play   inpu   isp   add   style   

实现目标:点击按钮复制本行,修改后重新插入到本行后面,点击复制出的行可删除本行

代码如下:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>行自加自减</title>
 6 </head>
 7 <body>
 8     <div class="outer">
 9         <div>
10             <div style="display: inline-block;">
11                 <a onclick="add(this);"><button>+</button></a>
12             </div>
13             <div style="display: inline-block;">
14                 <input type="checkbox">
15                 <input type="text">
16             </div>
17         </div>
18     </div>
19 
20     <script src="jquery-1.8.2.js"></script>
21     <script>
22         function add(self) {
23             var item = $(self).parent().parent().clone();
24             item.find(‘button‘).text(‘-‘);
25             item.appendTo(‘.outer‘);
26             item.find(‘a‘).attr(‘onclick‘,‘removee(this);‘);
27             //$(‘.outer‘).append(item)
28         }
29         function removee(ths) {
30             $(ths).parent().parent().remove();
31         }
32     </script>
33 </body>
34 </html>

 

jquery之行自加自减

标签:lock   body   append   col   play   inpu   isp   add   style   

原文地址:https://www.cnblogs.com/wenxianfeng/p/10354524.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!