javascript - 如何动态添加带有 Bootstrap 表单元素的 div？

Question

这是我的 JS fiddle :Demo

I have tried using the below JS code to dynamically replicate the form elements within the box (Expression LHS, RHS, Operator, Datatype) However, it did not work.

有人可以帮我解决这个问题吗？此外，一旦我找到有关 Javascript/jQuery 的帮助，我将不得不使用 Vue.js 编写它。

任何帮助将不胜感激!谢谢!

     $('#addRow').click(function () {

           $('<div/>', {
               'class' : 'child-border', html: GetHtml()
     }).hide().appendTo('#container').slideDown('slow');

     });

 function GetHtml()
{
      var len = $('.child-border').length;
    var $html = $('.parent-border').clone();
    $html.find('[name=lhs]')[0].name="lhs" + len;
    $html.find('[name=rhs]')[0].name="rhs" + len;
    $html.find('[name=data]')[0].name="data" + len;
    $html.find('[name=op]')[0].name="op" + len;

    return $html.html();    
}

Answer 1

你可以简化一切:

• 克隆parent-border
• 为每个输入元素更改name 和id
• 将类从父边界切换到子边界并追加。

请记住:ID 必须是唯一的，并且对于要进行 ajax 的每个字段都需要一个名称。

$('#deleteRow').closest('.form-group').hide();
$('#addRow').on('click', function (e) {
    var len = $('.child-border').length;
    $('.parent-border').clone().find(':input').each(function (idx, ele) {
        ele.name = ele.name + len;
        ele.id = ele.id + len;
        ele.value = '';
    }).end().find('.form-group').toggle(true).end()
            .toggleClass('parent-border child-border').hide()
            .appendTo('#container').slideDown('slow');
});

$('button.btn:contains("Save")').on('click', function (e) {
    var jsonData = $('form.form-horizontal')
            .find(':input:not(button)').get()
            .reduce(function (acc, ele) {
                acc[ele.name || ele.id] = ele.value;
                return acc;
            }, {});
    console.log(jsonData);
});

$('#container').on('click', '[id^=deleteRow]', function(e) {
    var jsonData = $(this).closest('.child-border, .parent-border')
            .find(':input:not(button)').get()
            .reduce(function (acc, ele) {
                acc[ele.name || ele.id] = ele.value;
                return acc;
            }, {});
    $(this).closest('.child-border, .parent-border').remove();
    console.log(jsonData);
});

.navbar-nav li {
    margin-top: 8px;
    margin-bottom: 8px;
}
.tabs-container {
    margin-top: 100px;
}
.parent-border, .child-border {
    border: 1px solid #CCC;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 15px;
}
.btn-circle.btn-lg {
    width: 50px;
    height: 50px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 25px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header pull-right">
            <ul class="nav navbar-nav">
                <li>
                    <button class="btn btn-md btn-success">Login</button>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div class="container">
    <div class="row tabs-container">
        <div class="col-sm-offset-2 col-sm-8">
            <div class="panel with-nav-tabs panel-default">
                <div class="panel-heading">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#tab1default" data-toggle="tab">Rules</a></li>
                        <li><a href="#tab2default" data-toggle="tab">Events</a></li>
                    </ul>
                </div>
                <div class="panel-body">
                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="tab1default">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label class="control-label col-sm-2" for="name">Name:</label>

                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="name" name="name"
                                               placeholder="Enter name">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-sm-2" for="type">Type:</label>

                                    <div class="col-sm-10">
                                        <select class="form-control" id="type1" name="type1">
                                            <option>Type1</option>
                                            <option>Type2</option>
                                            <option>Type3</option>
                                            <option>Type4</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-sm-2" for="type">Description:</label>

                                    <div class="col-sm-10">
                    <textarea class="form-control" rows="4" cols="50" name="descriptionRules">XYZ
                    </textarea>
                                    </div>
                                </div>
                                <div class="parent-border col-sm-offset-2 col-sm-10">
                                    <div class="form-group">
                                        <div class="col-sm-offset-10">
                                            <button type="button" id="deleteRow" class="btn btn-success btn-circle btn-lg"><i
                                                    class="glyphicon glyphicon glyphicon-trash"></i></button>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-sm-2" for="type">Expression LHS:</label>

                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" id="elhs" name="elhs"
                                                   placeholder="Enter LHS"
                                                   name="lhs">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-sm-2" for="type">Operator</label>

                                        <div class="col-sm-10">
                                            <select class="form-control" id="op" name="op">
                                                <option><=</option>
                                                <option>>=</option>
                                                <option>!==</option>
                                                <option><</option>
                                                <option>></option>
                                                <option>==</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-sm-2" for="erhs">Expression RHS:</label>

                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" id="erhs" name="erhs"
                                                   placeholder="Enter RHS"
                                                   name="rhs">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-sm-2" for="type">Datatype:</label>

                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" id="datatype" name="datatype"
                                                   placeholder="Enter datatype" name="datatype">
                                        </div>
                                    </div>
                                </div>
                                <div id="container">
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-6">
                                        <button type="button" id="addRow" class="btn btn-success btn-circle btn-lg"><i
                                                class="glyphicon glyphicon-plus"></i></button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="tab-pane fade" id="tab2default">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label class="control-label col-sm-2" for="name1">Name:</label>

                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="name1" name="name1"
                                               placeholder="Enter name">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-sm-2" for="type">Type:</label>

                                    <div class="col-sm-10">
                                        <select class="form-control" id="type" name="type">
                                            <option>Type1</option>
                                            <option>Type2</option>
                                            <option>Type3</option>
                                            <option>Type4</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-sm-2" for="type">Description:</label>

                                    <div class="col-sm-10">
                    <textarea class="form-control" rows="4" cols="50" name="descriptionEvents">XYZ
                    </textarea>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /.container -->
    <div class="navbar navbar-inverse navbar-fixed-bottom">
        <div class="container">
            <div class="navbar-footer pull-right">
                <ul class="nav navbar-nav">
                    <li>
                        <button class="btn btn-md btn-success">Save</button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>