分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

jquery之行自加自减

发布时间:2023-09-06 02:32责任编辑:苏小强关键词:暂无标签

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

代码如下:

 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之行自加自减

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved