如何在动态列表中添加多个数字？

Question

So I've been searching and re-searching a lot on this and seem to be getting nowhere.

I have code that has a big list of data and when I click on an item the item forms a new list with a price. I'm trying to get the prices on the new list to form a total and I'm not very good with jQuery yet so I can only get so far as to display the first list items price and I am not sure how I can get it to loop through all of my .textbox 's to add all the numbers not just the first one only.

So here is what I have so far:

$('.itemproduct').click(function () {
    var product = $(this).find('.product').html();
    var price = $(this).find('.price').html();
    $("#list").append('<tr id="help">' + '<td>' + product + '</td>' + '<td class="move add">' + '<input type="text" class="textbox" value="' + price + '"/>' + '</td>' + '</tr>');
    var num = parseFloat($(".textbox").val());
    var new_num = $("#total").val(num.toFixed(2));
});

JSFiddle

Answer 1

You need to add a variable that tracks the total, and iterate the textboxes to calculate the total, and then display the total in the '#total' box. As such:

Working fiddle: http://jsfiddle.net/8d74n/4/

$('.itemproduct').click(function () 
{
    var product = $(this).find('.product').html();
    var price = $(this).find('.price').html();
    var total = 0.00;

    $("#list").append('<tr id="help">' + '<td>' + product + '</td>' + '<td class="move add">' + '<input type="text" class="textbox" value="' + price + '"/>' + '</td>' + '</tr>');

    $( '.textbox' ).each( function( ) 
    {
        var itemPrice = parseFloat( $( this ).val( ) );
        total += itemPrice;
    });

    total = total.toFixed( 2 );
    $( '#total' ).val( total );    
});

EDIT -----------

Was just fooling around with the fiddle and noticed that I got a rounding error, the total started to become numbers like '6.58999999999999999996' To account for this I added the line 'total = total.toFixed( 2 ); also updated the fiddle version

Answer 2

Or try this:

$('.itemproduct').click(function () {

    var product = $(this).find('.product').html();
    var price = $(this).find('.price').html();

    $("#list").append('<tr id="help">' + '<td>' + product + '</td>' + '<td class="move add">' + '<input type="text" class="textbox" value="' + price + '"/>' + '</td>' + '</tr>');

    var num = parseFloat($(".textbox").val());

    createTotal();    

});

function createTotal(){   
    var total = 0.0;
    $('#list tr').each(function(key, val){        
        total += parseFloat($(val).find('input').val());
    });
    $("#total").val(total.toFixed(2));
}

http://jsfiddle.net/8d74n/5/