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出来.....
一年多之前 回复
molly_654
molly_654 错的.......
一年多之前 回复
ljheee
ljheee   Rxr 2016.05.05 22:38
CommandBaby
CommandBaby   2016.05.06 09:04

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

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!