Question

我有一个包含两个字段的表单，日期和价格。

日期字段附有一个日期选择器，工作正常。

我已经添加了向表中添加新行的选项，并再次使用该选项可以删除行..但是我有几个问题

虽然datepicker适用于每个新的datepicker字段，但所选日期将被发布回错误的字段。如果我删除一行，则datepicker会回发到上一行。
我想使用date []和price []之类的名称，这样我就可以将表单中的详细信息作为数组。我认为这是行不通的，因为jquery要求每个字段都有一个唯一的名称。

这就是我目前设置表单的方式：

        <tr>
            <td><input id="date" class="datepick" name="date[]" type="text" /></td>
            <td><input type="text" name="price[]"></td>
            <td><a class="deleteRow"></a></td>
        </tr>

我在这里创建了一个 JFiddle ，以显示我现在已经走了多远。

由于

Answer 1

问题是你使用相同的计数器作为新元素的id。所以在某个时间点可能有两个具有相同id的元素。

我修改了代码，以便id总是可变的，而且元素的名称也是date []，这就是你想要的。

第一个TR日期的HTML代码字段：

input id="date0" class="datepick" name="date[]" type="text"

Javascript代码：

$(document).ready(function(e) {
     var counter = 0;
     var idCnt = 1;

$(".datepick").datepicker({ dateFormat: "dd MM yy" });


$("#addrow").on("click", function () {

    counter = $('#myTable tr').length - 2;
    var newRow = $("<tr>");
    var cols = "";

    cols += '<td><input type="text" name="date[]" class="datepick dates" id="date"/></td>';
    cols += '<td><input type="text" name="price[]"/></td>';
    cols += '<td><input type="button" class="ibtnDel"  value="Delete"></td>';
    newRow.append(cols);
    console.log (cols);
    if (counter == 4) $('#addrow').attr('disabled', true).prop('value', "Done");
    $("table.order-list").append(newRow);
    counter++;

    $('.dates', newRow).each(function(i) {
        var newID = 'date' + idCnt;
        $(this).attr('id', newID);
        idCnt++;

        $(this).datepicker({ dateFormat: "dd MM yy" });

});

});

$("table.order-list").on("click", ".ibtnDel", function (event) {
    $(this).closest("tr").remove();
    counter -= 1;
    $('#addrow').attr('disabled', false).prop('value', "Add Row");
    $(".datepick").datepicker({ dateFormat: "dd MM yy" });

});
});

Jquery - 动态表行和日期选择器

1 个答案: