javascript - 使用 jQuery 保存多行

Question

我有一个包含 2 个字段和一个添加行 按钮的表单。单击此按钮时，它只是克隆该行并添加由 2 个表单字段组成的另一行。如何在我的 ajax 帖子中保存这些新添加的字段？现在，它只保存我表单中的最后一行。

<form action="." method="post">
    <table class="table table-condensed" id="pa">
        <thead>
            <tr>
                <th class="col-xs-2">Description</th>
                <th class="col-xs-2">Expected %</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="form-group">
                        <input class="text-box single-line" data-val="true" data-val-required="The Description field is required." id="Description" name="Description" value="" type="text">
                    </div>
                </td>
                <td>
                    <div class="form-group">
                        <div class="input-group">
                            <input class="text-box single-line" data-val="true" data-val-number="The field Expected must be a number." id="Expected" name="Expected" value="100" type="number">
                        </div>
                    </div>
                </td>
                <td class="vert-align"> <a class="btn btn-danger btn-xs remove-row-pa">x</a>

                </td>
            </tr>
        </tbody>
    </table>
    <div class="pull-right">
        <p> <a href="#" id="add-pa-row" class="btn btn-success btn-xs">
                        <i class="fa fa-plus-circle"></i> Add row
                    </a>

        </p>
    </div>
    <div class="form-group">
        <p>
            <input value="Save" class="btn btn-success" type="submit">
        </p>
    </div>
</form>

function Qs2Dict(qs) {
    var pairs = qs.split('&');
    var dict = {};
    pairs.forEach(function (pair) {
        var kv = pair.split('=');
        dict[kv[0]] = decodeURIComponent(kv[1].replace(/\+/g, "%20"));
    });
    return dict;
}

// Add row 
$("#add-row").click(function () {
    $('#pa tbody>tr:last').clone(true).insertAfter('#pa tbody>tr:last');
    $('#pa tbody>tr:last #Description').val('');
    $('#pa tbody>tr:last #Expected').val('');
    return false;
});


$('#modal').click(function (e) {
    e.preventDefault();
    var url = $(this).data('url');
    var data = $('form').serialize();
    var dict = Qs2Dict(data);


    $.ajax({
        type: "POST",
        url: url,
        data: {
            "Description": dict.Description,
                "EffectiveDate": dict.EffectiveDate,
                "Expected": dict.Expected,
        },
        success: function (result) {},
    });
});

Answer 1

更改它们的名称属性，因为它定义/枚举要保存的字段。如果它们相等(克隆时它们相等)，则仅采用最后一个。

或者使用数组，即 name="Expected[]"

编辑:更具体地说:我认为他们在 $('form').serialize();

期间由于上述原因而“丢失”