2 molly 654 molly_654 于 2016.05.05 22:24 提问

web前端 js 点击添加

图片说明

想实现点击“+“按钮,就添加一行上图一样的三个框在该按钮下方对应位置,拜托各位帮忙解决一下。

3个回答

showbo
showbo   Ds   Rxr 2016.05.06 09:26
已采纳
 <div id="dvList">
    <div id="dvAdd"><input type="text" style="width:60px" placeholder="成员名" /><input placeholder="成员角色" type="text" style="width:200px" /><input type="button" value="添加" onclick="clone(this)" /></div>
</div>
<script type="text/javascript">
    function clone(btn) {
        if (btn.value == '添加') {
            var div = document.getElementById('dvAdd');
            div = div.cloneNode(true);
            div.removeAttribute('id');
            div.lastChild.value = '删除';
            document.getElementById('dvList').appendChild(div);

        }
        else if (confirm('确认删除!?')) {
            document.getElementById('dvList').removeChild(btn.parentNode);
        }
    }
</script>
molly_654
molly_654 我不只要添加一次 是要可以添加很多次的 还有就是这个div下面还有内容,照你现在写的,点击加号以后就跳到最底下了 而且并没有多这么一模一样的div出来.....
大约 2 年之前 回复
molly_654
molly_654 错的.......
大约 2 年之前 回复
ljheee
ljheee   Rxr 2016.05.05 22:38
CommandBaby
CommandBaby   2016.05.06 09:04

可以使用拼接html的方式,把当前行的html代码写出来,然后点击按钮把这一样的代码append到当前容器中

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
Web前端从入门到放弃(js鼠标拖拽特效)
js鼠标拖拽特效 我们来实现用鼠标点击一个盒子并可以在浏览器窗口下拖拽 原理:利用鼠标点击盒子,然后通过鼠标坐标减去盒子在浏览器的坐标从而得到鼠标在盒子上的disX和disY的值,在利用onmousemove事件,把鼠标移到的位置的坐标的值减去鼠标在盒子上的disX和disY的值赋给盒子的left和right,最后利用onmouseup事件将onmousemove事件给“关了”
web前端动态添加进度条
为了网络延迟加载或者为了防止提交后重复点击提交按钮,比较好的方式就是显示一个比较优雅的进度条 源码如下:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>进度条</title> <style> *{ padding: 0;
web前端pc,mobile复制粘贴功能的实现
第一步:首先将要复制的内容放到一个隐藏的input标签中,不要用type='hidden',利用定位或css将input隐藏 第二步:HTML代码片段 第三步:引入clipboard.min.js,src路径为点击打开链接  https://pan.baidu.com/s/1sl7aMip,如图: 第四步:调用,如图:
web前端--添加、显示表情图片
web前端——添加、显示表情图片
Web前端:原生javascript实现列表元素的点击删除
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>Document</title> <style type="text/css"> ul{ list-style:none; width:1
231个web前端的javascript特效分享
1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后,产生该文件 (value==”) {value=’郭强’}”>点击时文字消失,失去焦点时文字再出现 2.网页按钮的特殊颜色 style=”backgroun
三行代码搞定友盟统计
说是三行代码,其实是三个步骤,非常简单
前端自动化测试工具——SlimerJS
前端自动化测试工具——SlimerJS 1.基本了解 对于富客户端的Web应用页面,自动登录、页面修改、抓取页面内容、屏幕截图、页面功能测试…面对这些需求,使用后端语言需要花费不少的精力才能实现。此时SlimerJS或许是更好的一种选择。 SlimerJS是服务器端的JavaScriptAPI工具,可以理解为无界面的可编程操作的浏览器。SlimerJS基于火狐的Gecko内核
javascript点击按钮,增加文本框和按钮
script type="text/javascript"> var count = 1; //用来判断是删除 还是增加按钮 以便count值进行计算 function checkCount(boolOK, coun) { if (boolOK == true) { return count++; } e
【web前端】js页面文字选中后分享到新浪微博实现
js页面文字选中后分享到新浪微博实现 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1428 一、功能简述 正是微博如火如荼的时节,其中各个微博的分享功能是网站推广产品的好东东啊,此时如何方便快捷的使用微博的分享功能就显得比较重要了。我的站点每篇文章的