CODEWITHSUNDEEP
jquery
test
test

Reputation: 2466

jQuery sum of each new created row

Im trying to calculate input val() on each row, currently it calculates only 1st row please help, Thanks!

HTML

<a href="#" class="new">new</a>
<ul class="container"></ul>
<span class="all"></span>

JS

$('.new').click(function(){
    $("ul").append('<li><input type="text" class="inputA"/><input type="text" class="inputB"/><p>total:<span></span></p></li>');
});

$('.container').on('keyup', 'input', function(){

  var a = 0;
  var b = 0;
  var c = 0;
  var d = 0;

  $('ul li').each(function(){
    $(this).parent().find('li input').each(function(){
      a = parseInt($('.inputA').val());
      b = parseInt($('.inputB').val());
      c = a+b;
        $(this).parent().find('p span').html(c);
    });
    d += c;
  });

  $('.all').html(d);

});

FIDDLE

Upvotes: 0

Views: 81

Answers (4)

James P.
James P.

Reputation: 19617

A concise version. Includes a bit of code to handle new lines automatically as a bonus.

$('.new').click(function () {
    $("ul").append('<li><input type="text" class="inputA"/><input type="text" class="inputB"/><p>total:<span></span></p></li>');
});


$(document).on("blur","input.inputB",function () {
    $('.new').click();
});

$('.container').on('keyup', 'input', function (e) {

    //var code = e.keyCode || e.which;

    var d = 0;

    $('ul li').each(function () {
        a = parseInt($(this).find('input.inputA').val());
        b = parseInt($(this).find('input.inputB').val());
        c = a + b;
        $(this).find('p span').html(c);
        d += c;
    });


    $('#all').html(d);

});

[jsFiddle]

Upvotes: 0

j08691
j08691

Reputation: 207943

$('.new').click(function () {
    $("ul").append('<li><input type="text" class="inputA"/><input type="text" class="inputB"/><p>total:<span></span></p></li>');
});

$('.container').on('keyup', 'input', function () {
    var total = 0;
    $('ul li').each(function () {
        var a = parseInt($(this).find('.inputA').val(), 10) || 0;
        var b = parseInt($(this).find('.inputB').val(), 10) || 0;
        $(this).find('p span').html(a + b);
        total += (a + b);
    });
    $('.all').html(total);
});

jsFiddle example

Upvotes: 1

Naftali
Naftali

Reputation: 146310

Here is what I came up with:

$('.new').click(function () {
    $("ul").append($('<li>', {
        html: [
            $('<input>', {class: 'inputA'}),
            $('<input>', {class: 'inputB'}),
            $('<span>', {class: 'total'})
        ]
    }).data('total', 0)); //set list item total to ZERO
});

$('.container').on('keyup', 'input', function () {
    var other_input = $(this).siblings('input');
    var totalEl = $(this).siblings('.total');
    var total = parseInt(this.value);
    var list_item = $(this).parents('li');
    total += parseInt(other_input.val());
    totalEl.text(total); //show new total
    list_item.data('total', total); //set list item's total

    var real_total = 0;
    var allEl = $('.all');
    list_item.parent().find('li').each(function(){
        var t = $(this).data('total');
        real_total += t;
    }); //tally up all list item totals
    allEl.text(real_total); //display the total total
});

Fiddle: http://jsfiddle.net/maniator/Wn2cs/11/

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388406

Use

$('.new').click(function () {
    $("ul").append('<li><input type="text" class="inputA"/><input type="text" class="inputB"/><p>total:<span></span></p></li>');
});

$('.container').on('keyup', 'input', function () {

    var d = 0;
    $('.container li').each(function () {
        var $this = $(this),
            a = parseFloat($this.find('.inputA').val()) || 0,
            b = parseFloat($this.find('.inputB').val()) || 0
        var subTotal = a + b;
        $this.find('span').text(subTotal);
        d += subTotal;
    })

    $('.all').html(d);

});

Demo: Fiddle

Upvotes: 1

Related Questions