Question

我有一张桌子

<table id="tbl1">
    <tr class="Row">
        <td class="TimeCol">
            <input title="" type="text" readonly="readonly" class="FromTime " />
        </td>
        <td class="TimeCol">
            <input title="" type="text" readonly="readonly" class="ToTime " />
        </td>
    </tr>
</table>

并且我有一个锚标记，我可以像这样添加新行到表

<a href="#" onclick="javascript:return AddRow();">

JS：

$(document).ready(function () {
$('.FromTime, .ToTime').timepicker({
            timeFormat: "H:m:s",
            stepMinute: 01,
            ampm: true
        });
});
    function AddRow() {
        var $ttc = '';

        $ttc = $("#tbl1").find("tr:last");

        var $tr = $ttc.clone();

        // reset fields in the new row
        $tr.find("input[type=text]").val("");
        $tr.find(".FromTime").removeAttr('value');
        $tr.find(".ToTime").removeAttr('value');

        // add cloned row as last row
        $('#tbl1 tr:last').after($tr);


        // re-initialise the cloned timepickers:
        $fromTimepicker = $('#tbl1 tr:last').find('.FromTime,.ToTime');
        $fromTimepicker.removeClass("hasDatepicker");
        $fromTimepicker.timepicker({
            timeFormat: "H:m:s",
            stepMinute: 01,
            ampm: true
        });

        return false;
    }

现在，当添加新行并点击timepicker的Now按钮时，时间会在第一行文本框中更新...问题是什么以及如何解决？

在此之前点击图片

enter image description here

现在点击图片

enter image description here

更新如果我使用id将timepicker添加到文本框，则不会添加timepicker

var fromId = $('#tbl1 tr:last').find('.FromTime').attr('id');
$('#'+fromId).removeClass("hasDatepicker");
$('#' + fromId).timepicker({
    timeFormat: "H:m:s",
    stepMinute: 01,
    ampm: true
});

Answer 1

您应该初始化元素ID而不是元素类的timepicker。克隆行以添加新行时，新行与上一行具有相同的类。从你点击＆＃34;现在＆＃34; timepicker小部件上的按钮，timepicker使用类来选择输入字段并更新它找到的第一个输入字段中的时间，即第一行中的时间字段。

如果您在每个输入元素上使用唯一ID，timepicker将使用正确的元素更新时间。

编辑：请尝试以下更改：

// re-initialise the cloned timepickers:
$('#tbl1 tr:last').find('.FromTime').attr('id', 'new_from').removeClass("hasDatepicker"); 
$('#tbl1 tr:last').find('.ToTime').attr('id', 'new_to').removeClass("hasDatepicker"); 
$('#new_from, #new_to').timepicker({
    timeFormat: "hh:mm tt",
    stepMinute: 01,
    ampm: true
});

Answer 2

这对我有用。我添加了删除的id属性，一切正常。

我在初始化时间选择器之前添加了此$fromTimepicker.removeAttr("id");

    $fromTimepicker = $('#tbl1 tr:last').find('.FromTime,.ToTime');
    $fromTimepicker.removeClass("hasDatepicker");
    $fromTimepicker.removeAttr("id");
    $fromTimepicker.timepicker({
        timeFormat: "H:m:s",
        stepMinute: 01,
        ampm: true
    });

时间选择器现在按钮不起作用

2 个答案: