Javascript 在用户更新时将AJAX表单输入添加到一起

更新3

James，MondayTotal，是span标记中的一个类，比如

    <span class="TimebreakdownTotalWeek">Mon</span>
<span class="MondayTotal">0</span>

更新

詹姆斯，你是说我输入的html表单吗？如果是这样的话，就没那么容易了，它是使用CakePHP表单帮助器构建的，但是有代码

<input name="data[0][maintime]" class="TimebreakdownInput Monday0" type="text">

现在，这种方法是可行的，但我认为这个循环不可行。在加载的defult行中，输入（例如）1，然后添加新的AJAX加载行，并假设输入2，总共是3。但是如果你把第一行更新为2，它应该是4，但我得到5，所以它保留了总数，我不想要。我需要的是在用户发生变化时更新每行的总数

对不起，如果我没有解释好自己，请给我一个更好的解释，如果需要或如果你想要更多的代码

---

谢谢，

如果您每天都添加一个类，那么您可以选择所有周一，然后将其值相加

<input name="data[0][maintime]" class="TimebreakdownInput Monday0 Monday" type="text">
<input name="data[1][maintime]" class="TimebreakdownInput Monday1 Monday" type="text">
<input name="data[2][maintime]" class="TimebreakdownInput Monday2 Monday" type="text">

var getDayTotal = function(day){
   var days=$('.'+day);
   var total =0;
   days.each(function(){
       total+=parseFloat(this.value, 10);
   });
   return total;
}

$('.mondayTotal').html(getDayTotal('monday'));

var getDayTotal=函数（天）{
变量天数=$（'..'天+天）；
var合计=0；
天。每个（函数（）{
总计+=解析浮点值（该值为10）；
});
返回总数；
}
$（'.mondayTotal'）.html（getDayTotal（'mondayTotal'））；

这是我用来让它工作的函数，我是的，就像Sonicdeadlock说的那样，我通过移除循环，把所有的星期一都安排在同一个类中

  var LoadMondayTotals = function() {
    $('.TimebreakdownInput').change(function() {
        var MondayInputs = []; //Array to store all monday daily inputs
        var MondayTotals = 0; //Store Array total for display

        $(".Monday").each(function() { 
            var values = parseFloat( $(this).val() );   
            if (isNaN(values)) { values = 0; } //Set value to 0 if its not a number
            MondayInputs.push(values);
        });

        $.each(MondayInputs, function() {
            MondayTotals += this; //Count though array, add into total
        });

        $('.MondayTotal').html(MondayTotals); //Display / Add total into HTML
    });
 } //End of LoadMondayTotals

谢谢

---

为了获得帮助

在事件处理程序中，您可以将最近输入的值添加到总数中（因此，如果您只有一行，例如Monday0，并不断更改其值，那么您的总数将是您输入的所有数字的总和）。要解决此问题，您需要在每次输入数字时对所有.Monday0->.MondayN元素求和。你能为.Monday0元素和.MondayTotal元素显示html吗？也许我理解不正确，不循环输入标记会给你想要的总数吗？（可以基于包含要筛选的星期几的子字符串筛选.class属性）。如果你准备了一个我们可以玩的JSFIDLE，它会更好：-）是的，它确实有效，在同一行它自己。所以当添加mon->sun时，它会打印出我那周的总数（我会在一秒钟内发布该函数）。但是当我想做的时候，就是把所有的星期一加起来，给我一个总数。很抱歉，我试着/试图设置一个JS提琴，但这很难，因为我正在使用AJAX和PHP循环来设置其中的一些，但我会尝试，我想我要求的是.MondayTotal的HTML，这样在求和时可以更容易地排除它。现在我有点同意了，我在下面发布了我要处理的代码

<input name="data[2][maintime]" class="TimebreakdownInput Monday3" type="text">

var LoadDailyTotal = function(Count) {
    var $WeekTotal = $('.MondayTotal');

    if (typeof Count === "undefined" ) {
        var $WeekValue = $('.Monday0');
    } else {
        var $WeekValue = $('.Monday'+Count);
    }

    $WeekValue.on('input', function(e) {
        var totalweek = 0;
        var currentTotal = parseFloat ($('.MondayTotal').html() );

        $WeekValue.each(function (index, elem) {
            if (!Number.isNaN(parseFloat(this.value, 10))) totalweek = totalweek + parseFloat(this.value, 10);
        });
        $WeekTotal.html(currentTotal + totalweek);
    });
}

<input name="data[0][maintime]" class="TimebreakdownInput Monday0 Monday" type="text">
<input name="data[1][maintime]" class="TimebreakdownInput Monday1 Monday" type="text">
<input name="data[2][maintime]" class="TimebreakdownInput Monday2 Monday" type="text">

var getDayTotal = function(day){
   var days=$('.'+day);
   var total =0;
   days.each(function(){
       total+=parseFloat(this.value, 10);
   });
   return total;
}

$('.mondayTotal').html(getDayTotal('monday'));

  var LoadMondayTotals = function() {
    $('.TimebreakdownInput').change(function() {
        var MondayInputs = []; //Array to store all monday daily inputs
        var MondayTotals = 0; //Store Array total for display

        $(".Monday").each(function() { 
            var values = parseFloat( $(this).val() );   
            if (isNaN(values)) { values = 0; } //Set value to 0 if its not a number
            MondayInputs.push(values);
        });

        $.each(MondayInputs, function() {
            MondayTotals += this; //Count though array, add into total
        });

        $('.MondayTotal').html(MondayTotals); //Display / Add total into HTML
    });
 } //End of LoadMondayTotals