Question

我已经搜索过hi和low这个解决方案，基本上我想要一个旁边有加号的面板，当用户点击加号时，表单1的空白版本会被复制到一个新的面板中点击+号后：

__________________________________
|表格1 |
| |
| | （+）

__________________________________
|表格2 |
| |
| | （+）（ - ）

使用减号再次删除面板也很方便。

有人知道这样的事情，或者有人能指出我正确的方向。

感谢您的光临。

Answer 1

function cloneForm() {
  var form1 = document.getElementById( 'form1' );
  var form2 = form1.cloneNode( true );
  document.insertBefore( form2, form1.nextSibling );
}

这个克隆形式。但是如果你想要克隆表格，请将'form'替换为'div'。

编辑：修正错字

Answer 2

让我们假设你有

<div id="wrap">
    <div class="duplicate">
        something
        <span class="plus">+</span>
    </div>
</div>

你能做的是：

$('span.plus').click(function() {
    new = $(this).parent().clone().appendTo('#wrap');
    $('<span class="minus">-</span>').insertAfter(new.children('span'))
        .click(function() {
            $(this).parent().remove();
        });

});

当然没有经过测试......;）

编辑：该死的......我以为你正在使用jQuery ......但是它应该以与任何其他Javascript框架类似的方式工作。

Answer 3

在表单下方添加+和 - 链接可能更简单，而不是在添加/删除表单时移动。这是JS：

var forms = 1;

function add() {
    var form1 = document.getElementById('form1');
    var newForm = form1.cloneNode(true);
    newForm.id = 'form' + ++forms;
    document.getElementById('forms').appendChild(newForm);
}

function subtract() {
    if (forms > 1) {
        document.getElementById('forms')
         .removeChild(document.getElementById('form' + forms--));
    }
}

这是HTML片段：

<div id="forms">
    <div id="form1">
        something
    </div>
</div>

<p><a href="javascript:add()">+</a> <a href="javascript:subtract()">&minus;</a></p>

可以进行改进，但这应该让你现在继续。

动态地揭示隐藏的div

3 个答案: