CODEWITHSUNDEEP
javascriptjqueryhtml
andrefadila
andrefadila

Reputation: 687

Listen any changes event on table HTML by jQuery

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.net/ao6t2axs/

How to do this using javascript/jQuery?

Thanks in advance

Upvotes: 2

Views: 18409

Answers (1)

Andy Newman
Andy Newman

Reputation: 281

Have updated your jsfiddle with a working solution

http://jsfiddle.net/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.

Upvotes: 6

Related Questions