I want to make Total field in HTML table always listen if any changes on Qty/Price/Disc field (see below). So Total field always updated.

Id | Product | Qty | Price | Disc | Total
1  |    A    |  1  |   2   |  0   |   2
2  |    B    |  2  |  10   |  10  |  18
...

Here's the HTML : /

How to do this using javascript/jQuery?

Thanks in advance

I want to make Total field in HTML table always listen if any changes on Qty/Price/Disc field (see below). So Total field always updated.

Id | Product | Qty | Price | Disc | Total
1  |    A    |  1  |   2   |  0   |   2
2  |    B    |  2  |  10   |  10  |  18
...

Here's the HTML : http://jsfiddle/ao6t2axs/

How to do this using javascript/jQuery?

Thanks in advance

• javascript
• jquery
• html

• 2 How are the fields being updated? Are they inputs or are they being updated by some other JS? – Andy Newman Commented Aug 7, 2015 at 10:05
• please show your code, what you are asking is relativly simple, but without seeing your code people can only guess. how is the table built? what is the element holding those values? how is Qty/Price etc updated? – atmd Commented Aug 7, 2015 at 10:07
• Now, I am using other JS (x-editable), at least i want to know if we use HTML inputs to update the fields. @AndyNewman – andrefadila Commented Aug 7, 2015 at 10:08
• now, i start coding with detect any changes in every field (Qty, Price, Disc) @atmd – andrefadila Commented Aug 7, 2015 at 10:12
• "i start coding with detect any changes in every field" what are 'fields'? td? td? div? input? show your html and js and you'll get much more informed answers – atmd Commented Aug 7, 2015 at 10:14

1 Answer 1

Have updated your jsfiddle with a working solution

http://jsfiddle/5bym3jq5/

Code is

$('#table').on('change', 'input', function () {
    var row = $(this).closest('tr');
    var total = 0;
    $('input', row).each(function() {
        total += Number($(this).val());
    });
    $('.total', row).text(total);
});

Basically watch for any time an input inside the table fires a change event, find the row that that input is a part of, then update the total value for that row.