当添加新行时，总持续时间值应该会更改，但不会更改;t

Total duration value should change when new row is added but it doesn't

本文关键字：新行时 添加 持续时间      更新时间：2023-09-26

我在顶部有一个文本框，显示总持续时间。现在，用户从时间选择器中选择一个持续时间，这将显示在文本框中，然后将其添加到新行中。现在我的情况是，文本框的格式是这样的"00小时00分钟00秒"。

因此，例如，如果剩余的总持续时间为01小时30分钟20秒，并且从时间选择器中选择00小时40分钟00秒（使用时间选择器滑块选择持续时间，然后单击"确定"，该值显示在文本框中），然后将其添加到新行中，则01小时30分20秒应减去00小时40分00秒，使00小时50分20秒。

问题是，当我添加具有选定持续时间的行时，它不会更改剩余的总持续时间。有人知道为什么会这样吗？

我使用的live（）方法没有问题（尽管我将来会将其更改为on），我相信问题在于我在jquery中的计算，但我不确定。

下面是fiddle中的代码（这不显示时间选择器，这个jsfiddle在这里向您展示代码的外观以及如何添加新行）。

http://jsfiddle.net/7JWVJ/5/

我有一个工作正常的应用程序，这与我想为这个应用程序做的非常相似，但它在文本框中使用普通数字。这是下面的小提琴。只需打开小提琴，在文本框中输入一个数字，点击"添加"按钮，它就会将您输入的数字从100中删除。编辑添加到其他数字的行，然后再次查看计算工作。这是小提琴下面的正常数字，而持续时间的格式是"00小时00分钟00秒"，这是两个之间的主要区别

http://jsfiddle.net/uThKQ/25/

好了：（代码当然可以使用更多的优化，但这很有效）

    var duration = '01 Hrs 30 Mins 20 Secs';

$(document).ready(function(){
    $('#total-duration').html(duration);
    $(function() {  
        $('#questiondurationpicker').trenttimepicker({
            timeFormat:'hh mm ss',
            hourGrid: 4,
            minuteGrid: 10,
            secondGrid: 10,
            showOn: 'button',
            buttonImage: "Images/clock.gif",
            buttonImageOnly: true
        });        
    });
    $(".questiondurationpickerRow").live("change", calculateDuration);
    $("#addQuestionBtn").live("click", calculateDuration);
});

function insertQuestion(form) {      
    var $tr = $("<tr></tr>");
    var $duration = $("<td class='duration'></td>");
    $('#questiondurationpicker').each( function() {
        var $this = $(this);
        var $durationText = $("<input type='text' class='questiondurationpickerRow' readonly='readonly' />").attr('name',$this.attr('name')).attr('value',$this.val())
        $duration.append($durationText);
    });
    $tr.append($duration);
    $('#qandatbl').append($tr);
    $('.questiondurationpickerRow').trenttimepicker({
        timeFormat:'hh mm ss',
        hourGrid: 4,
        minuteGrid: 10,
        secondGrid: 10,
        showOn: 'button',
        buttonImage: "Images/clock.gif",
        buttonImageOnly: true
    });
}
var format = duration.match(/('d'd)/ig),
hours = parseInt(format[0], 10),
mins = parseInt(format[1], 10),
secs = parseInt(format[2], 10);
function calculateDuration()
{
    var totalduration = duration;  
    var sign = '';
    var tmp_hours = 0;
    var tmp_mins = 0;
    var tmp_secs = 0;
    $("#qandatbl td.duration input").each(function (){
        tmp_format = $(this).val().match(/('d'd)/ig),
        tmp_hours += parseInt(tmp_format[0], 10),
        tmp_mins += parseInt(tmp_format[1], 10),
        tmp_secs += parseInt(tmp_format[2], 10);
    });
    newH = hours - tmp_hours;
    newM = mins - tmp_mins;
    newS = secs - tmp_secs;
    if( newS < 0 ) {
        newS += 60;
        newM--;
    }
    if( newM < 0 ) {
        newM += 60;
        newH--;
    }       
    if(newH < 0) {
        newH = tmp_hours - hours;
        newM = tmp_mins - mins;
        newS = tmp_secs - secs;
        if( newS < 0 ) {
            newS += 60;
            newM--;
        }
        if( newM < 0 ) {
            newM += 60;
            newH--;
        }       
        sign = '- ';
    }       
    checkedH = (newH < 10 ? '0' : '') + newH;
    checkedM = (newM < 10 ? '0' : '') + newM;
    checkedS = (newS < 10 ? '0' : '') + newS;
    new_duration = sign + checkedH + ' Hrs ' + checkedM + ' Mins ' + checkedS + ' Secs';

    $("#total-duration").text(new_duration);
}
相关文章：