javascript - 如何做动态div - 展开折叠循环

Question

我需要一个函数，允许我的客户在表单上添加更多 div 或不添加更多 div，例如单击按钮 (+)，如循环

这个循环应该重复 div 和添加更多 div 的按钮，如下图所示

有人知道如何做到这一点吗？

展开折叠是最好的方法吗？

非常感谢!

Answer 1

我不确定您的愿望是什么，所以我发布了两个选项:

如果您想扩展隐藏的现有字段并假设您可以使用 JQUery:

<table>
    <tr>
        <th>Field1</th>
        <td><input type="text" value="" /></td>
    </tr>
    <tr>
        <th>Field2</th>
        <td><input type="text" value="" /></td>
    </tr>
    <tr class="hiddenarea" style="display: none;">
        <th>Field3 (Hidden)</th>
        <td><input type="text" value="" /></td>
    </tr>
</table>
<input id="show_hide" value="Collapse/Expand" />

<script type="text/javascript">
    $("#show_hide").click(function() {
        $(".hiddenarea").toggle();
    });
</script>

////////////////////////////////////

向表格添加新行的第二种解决方案是:

<table id="mytable">
    <tr>
        <th>Field1</th>
        <td><input type="text" value="" /></td>
    </tr>
    <tr>
        <th>Field2</th>
        <td><input type="text" value="" /></td>
    </tr>
</table>
<input id="show_hide" value="Collapse/Expand" />

<script type="text/javascript">
    $("#show_hide").click(function() {
        $("#mytable").append('<tr><td>New field</td><td><input type="text" value="" /></td></tr>');
    });
</script>