动态地揭示隐藏的div

时间:2009-07-27 11:31:06

标签: javascript ajax

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

__________________________________
|表格1 |
| |
| | (+)

__________________________________
|表格2 |
| |
| | (+)( - )

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

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

感谢您的光临。

3 个答案:

答案 0 :(得分:1)

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

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

编辑:修正错字

答案 1 :(得分:1)

让我们假设你有

<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框架类似的方式工作。

答案 2 :(得分:0)

在表单下方添加+和 - 链接可能更简单,而不是在添加/删除表单时移动。这是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>

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

豫ICP备18024241号-1