Erlo

jquery之行自加自减

时间:2019-02-07 11:02   阅读:92次   来源:博客园页面报错

点赞 打赏

×打赏

支付宝

微信

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

代码如下:

 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>

 

下一篇:03-HTML的body标签(文本标签)学习

评论留言

还没有评论留言,赶紧来抢楼吧~~

Erlo大厅()

* 这里是“吐槽厅”,所有人可看,只保留当天信息。

  • Erlo.vip2019-04-26 04:51:56Hello、欢迎使用吐槽厅,这里是个吐槽的地方。
  • 首页 笔记分享 案例展示 ERLO 搜索
    鼠标试试
    返回顶部