Question

我有一个Bootstrap水平表单（包含很多字段），并希望能够在父表单中添加/删除一个或多个＆＃34;子表单（包含许多字段）。

此外，我不确定哪条路可以使用，也就是使用Bootstrap组件编写代码，或者纯粹使用jQuery和CSS（在Bootstrap中），或仅使用JavaScript（在Bootstrap中）。

这可能是一个简单的问题，我一直在寻找面包和黄油的解决方案，但没有运气。也许这很难做到。

找到了这个，但没有帮助Similar question on SO

而且，这是在JavaScript Another question on SO

中完成的

以下是我想要做的一个示例，我有一个父表单，其中包含个人详细信息字段，并希望当用户单击按钮（+）时，动态添加地址表单，如果单击按钮（ - ），删除地址表单。

人

姓：

电子邮件：

按钮（+/-）

地址1

街道：

市郊：

邮编：

地址2

街道：

市郊：

邮编：

Answer 1

我做过类似于与剑道谈论的事情。基本上，您需要一个模板并添加/删除项目功能。使用任何模板功能，您可以定义模板，并基于JSON对象动态生成模板，并将其添加到DOM树，或使用jQuery从DOM树中删除现有项。

Answer 2

模板是一个很好的选择，可能就是你应该去的方式。但是，如果你想避免添加模板引擎，你可以使用jQuery，甚至只是vanilla JS。

这是简单的JQuery示例：

  $(function () {
    function createGroup(name) {
        var label = document.createElement("label");
        $label = $(label);
        $label.attr("for", name)
            .text(name);

        var input = document.createElement("input");
        $input = $(input);
        $input.addClass("form-control")
            .attr("type", "text")
            .attr("name", name);

        var group = document.createElement("div");
        $group = $(group);
        $group.addClass("form-group")
            .append(label, input);

        return group;
    }

    $("#plusButton").click(
        function () {
            var newHorizontalForm = document.createElement("div");
            $(newHorizontalForm).append(createGroup("New Input"),
                    createGroup("New Input"),
                    createGroup("New Input"))
                .addClass("form-horizontal");
                $("#form").append(newHorizontalForm);
    });


     $("#minusButton").click(
            this.parent.remove();
        });

});

Bootstrap表单动态添加带字段的删除表单

2 个答案: