使用 jQuery 动态添加输入和选择字段

Question

在下面的代码中，我尝试在单击按钮时动态添加行。 INPUT 字段一直工作顺利，但如果我们在代码中包含 SELECT 字段，则无法添加行。

还添加了应为所有添加的 tr 提交数据的行。

@if (Model != null && Model.Count > 0)
        {


            int j = 0;
            foreach (var i in Model)
            {
        <tr style="border:1px solid black">
            <td>@Html.TextBoxFor(a => a[j].Project,new { @required="required"})</td>
            <td>@Html.TextBoxFor(a => a[j].Task, new { @required = "required" })</td><td></td>
            <td>@Html.DropDownList("Status", ViewBag.EnumList as SelectList)</td>
            <td>@Html.TextBoxFor(a => a[j].UserId, new { @class = "id", @type = "hidden" })</td>
            <td>@Html.TextBoxFor(a => a[j].Email,new { @class="email",@type="hidden"})</td>
            <td>@Html.TextBoxFor(a => a[j].Date, new { @type="hidden"})</td>
            <td></td>
            <td>
                @if (j > 0)
                {
                    //<a href="#" class="remove btn btn-warning" id="delete">Remove</a>
                    <button class="remove btn btn-warning" id="delete">Remove</button>
                }
                </td>
        </tr>
                j++;
            }

jQuery如下

$("#addNew").click(function (e) {
                e.preventDefault();
                var $tableBody = $("#dataTable");
                var $trLast = $tableBody.find("tr:last");
                var e = $(".email").val();
                var id = $(".id").val();
                var $trNew = $trLast.clone();

                debugger;
                var suffix = $trNew.find(':input:first').attr('name').match(/\d+/);
                $trNew.find("td:last").html('<a href="#" class="remove" id="delete">Remove</a>');
                $.each($trNew.find(':input'), function (i, val) {
                    // Replaced Name
                    var oldN = $(this).attr('name');
                    var newN = oldN.replace('[' + suffix + ']', '[' + (parseInt(suffix) + 1) + ']');
                    $(this).attr('name', newN);
                    //Replaced value
                    var type = $(this).attr('type');
                    if (type.toLowerCase() == "text") {
                        $("#id").attr('value', id);
                        $("#email").attr('value', e);
                    }

                    // If you have another Type then replace with default value
                    $(this).removeClass("input-validation-error");

                });
                $trLast.after($trNew);

                // Re-assign Validation
                var form = $("form")
                    .removeData("validator")
                    .removeData("unobtrusiveValidation");
                $.validator.unobtrusive.parse(form);
            });

            // 2. Remove

            $(document).on('click', '#delete', function () {

                $(this).parent().parent().remove();

            });

Answer 1

-> 使用 jquery 动态添加输入和选择字段，请检查添加的新行是否还包含 select 元素。

@if (Model != null && Model.Count > 0)
{
    int j = 0;
    foreach (var i in Model)
    {
        <tr style="border:1px solid black">
            <td>@Html.TextBoxFor(a => a[j].Project, new { @required="required" })</td>
            <td>@Html.TextBoxFor(a => a[j].Task, new { @required = "required" })</td>
            <td>@Html.DropDownListFor(a => a[j].Status, ViewBag.EnumList as SelectList)</td>
            <td>@Html.TextBoxFor(a => a[j].UserId, new { @class = "id", @type = "hidden" })</td>
            <td>@Html.TextBoxFor(a => a[j].Email, new { @class = "email", @type = "hidden" })</td>
            <td>@Html.TextBoxFor(a => a[j].Date, new { @type = "hidden" })</td>
            <td>
                @if (j > 0)
                {
                    <button class="remove btn btn-warning" id="delete">Remove</button>
                }
            </td>
        </tr>
        j++;
    }
}

-> JavaScript :-

$("#addNew").click(function (e) {
    e.preventDefault();
    var $tableBody = $("#dataTable");
    var $trLast = $tableBody.find("tr:last");
    var e = $(".email").val();
    var id = $(".id").val();
    var $trNew = $trLast.clone();

    var suffix = $trNew.find(':input:first').attr('name').match(/\d+/);
    $trNew.find("td:last").html('<button class="remove btn btn-warning" id="delete">Remove</button>');

    $.each($trNew.find(':input'), function (i, val) {
        // Replaced Name
        var oldN = $(this).attr('name');
        var newN = oldN.replace('[' + suffix + ']', '[' + (parseInt(suffix) + 1) + ']');
        $(this).attr('name', newN);

        // If you have another Type then replace with default value
        $(this).removeClass("input-validation-error");
    });

    // Re-assign Validation
    var form = $("form")
        .removeData("validator")
        .removeData("unobtrusiveValidation");
    $.validator.unobtrusive.parse(form);

    $trLast.after($trNew);
});

-> 在此代码中，新行包括选择字段和输入字段，当您单击“添加”按钮时，它将动态添加。