jQuery sum text input in table

Question

In my code, when the button add is pressed, it creates a row in the table.

I need, in each line, when you leave the quantity or price input, the sum makes and assignes the value in the subtotal.

HTML

<table width="100%" border="0"  >
<tr>
    <td>Item</td>
    <td>Quantity</td>
    <td>U$ Price</td>
<td>Subtotal</td>
    <td>Add</td>
    <td>Remove</td>
</tr>
<tr class="tr_clone">
    <td>
        <select style="width:200px" name="itens[]">
        <option value="0"></option>
        <option value="1">Item A</option>
        <option value="2">Item B</option>
        <option value="3">Item C</option>
    </td>                                            
    <td><input type="text" size="5" maxlength="5" autofocus name="qtd[]" class="text ui-widget-content ui-corner-all"></td>
    <td><input type="text" size="10" maxlength="10" name="price[]" id="price" class="text ui-widget-content ui-corner-all"></td>
    <td><input type="text" size="10" maxlength="10" name="subtotal[]" class="text ui-widget-content ui-corner-all"></td>
    <td><input type="button" name="add" value="Add" class="tr_clone_add"></td>
    <td><input type="button" name="remove" value="Remove" class="tr_clone_remove"></td>
</tr>
</table>

jQuery

var $to_clone = $('.tr_clone').first().clone();

$("table").on('click', 'input.tr_clone_add', function () {
    var $tr    = $(this).closest('.tr_clone');
    var $clone = $to_clone.clone();
    $clone.find(':text').val('');
    $tr.after($clone);
});

$("table").on('click', 'input.tr_clone_remove', function () {
    var $tr    = $(this).closest('.tr_clone');
    $tr.remove();
});

What have you tried? You need to make an attempt, then tell us where you got stuck. — maxedison
– maxedison, Commented Mar 27, 2013 at 1:45
I can partly assist, try using document.getElementById to select the quantity and price fields for calculations. DEMO: jsfiddle.net/sDMjT I'm not sure how to make it detect which row you're working in so it will only work for the first row. — Mal
– Mal, Commented Mar 27, 2013 at 2:17
I really don't know how code I have to try, if focusin or focusout, each. I learning jquery, and I'm a little beat lost. — user1789239
– user1789239, Commented Mar 27, 2013 at 2:22

MLewisCodeSolutions · Accepted Answer · 2013-03-27 03:16:27Z

Try this. Should be what your looking for (fiddle)[http://jsfiddle.net/C6Su2/]:

HTML:

<table width="100%" border="0"  >
<tr>
    <td>Item</td>
    <td>Quantity</td>
    <td>U$ Price</td>
<td>Subtotal</td>
    <td>Add</td>
    <td>Remove</td>
</tr>
<tr class="tr_clone">
    <td>
        <select style="width:200px" name="itens[]">
        <option value="0"></option>
        <option value="1">Item A</option>
        <option value="2">Item B</option>
        <option value="3">Item C</option>
    </td>                                            
    <td><input type="text" size="5" maxlength="5" name="qtd" class="quantity text ui-widget-content ui-corner-all"></td>
    <td><input type="text" size="10" maxlength="10" name="price" class="price text ui-widget-content ui-corner-all"></td>
    <td><input type="text" size="10" maxlength="10" name="subtotal" class="subtotal text ui-widget-content ui-corner-all"></td>
    <td><input type="button" name="add" value="Add" class="tr_clone_add"></td>
    <td><input type="button" name="remove" value="Remove" class="tr_clone_remove"></td>
</tr>
</table>

jQuery 1.3+ (jsfiddle):

    var $to_clone = $('.tr_clone').first().clone();

$("table").on('click', 'input.tr_clone_add', function () {
    var $tr    = $(this).closest('.tr_clone');
    var $clone = $to_clone.clone();
    $clone.find(':text').val('');
    $tr.after($clone);
});

$("table").on('click', 'input.tr_clone_remove', function () {
    var $tr    = $(this).closest('.tr_clone');
    $tr.remove();
});
$(".quantity, .price").live("keyup", function(){
    var prtCont = $(this).parent().parent();
    var prce = parseInt(prtCont.find('.price').val()) - 0;
    var qnty = parseInt(prtCont.find('.quantity').val()) - 0;
    if(!isNaN(prce) && !isNaN(qnty)){
        prtCont.find('.subtotal').val(prce * (qnty));
    }else{
        prtCont.find('.subtotal').val("");
    }
});

OR jQuery 1.9+ (jsfiddle)

var $to_clone = $('.tr_clone').first().clone();

$("table").on('click', 'input.tr_clone_add', function () {
    var $tr    = $(this).closest('.tr_clone');
    var $clone = $to_clone.clone();
    $clone.find(':text').val('');
    $tr.after($clone);
});

$("table").on('click', 'input.tr_clone_remove', function () {
    var $tr    = $(this).closest('.tr_clone');
    $tr.remove();
});

$(document).on("keyup", ".quantity, .price", function(){
    var prtCont = $(this).parent().parent();
    var prce = parseInt(prtCont.find('.price').val()) - 0;
    var qnty = parseInt(prtCont.find('.quantity').val()) - 0;
    if(!isNaN(prce) && !isNaN(qnty)){
        prtCont.find('.subtotal').val(prce * (qnty));
    }else{
        prtCont.find('.subtotal').val("");
    }
});

Thanks for your code it is very useful to me. can you explain how to sum all subtotal.

Arun P Johny · Accepted Answer · 2013-03-27 03:14:52Z

0

If you can make the following changes to the html try the below code

Add the class qty to the input element qtd
Add the class price to the input element price
Add the class subtotal to the input element subtotal

Code

$('table').on('change', '.qty, .price', function(){
    var tr = $(this).closest('tr');
    var prce = parseInt($('.price', tr).val(), 10);
    var qnty = parseInt($('.qty', tr).val(), 10);
    if(!isNaN(prce) && !isNaN(qnty)){
        $('.subtotal', tr).val(prce * (qnty));
    }else{
        $('.subtotal',tr).val("");
    }
})

Demo: Fiddle

answered Mar 27, 2013 at 3:14

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

1 Comment

Arun P Johny Over a year ago

@MLewisCodeSolutions looks like you edited your answer after my post with jquery 1.9 solution not the other way around

Collectives™ on Stack Overflow

jQuery sum text input in table

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related