How to calculate total of a row in a table when quantity changes

Question

I am trying to update the total of each row with increasing quantity but only one row is updated. How can I update each row? How can I add id in these to make more dynamic? I am using jQuery version 2.2.4. Thanks in advance.

function myFunction() {
  var x = document.getElementById("fname") value;
  var str = $("#artprice").val();
  $('#total').html(str * x);
}

Rory McCrossan · Accepted Answer

There's several issues in your code.

There's a in the wrong place. It's outside the it belongs to
The #artprice input is outside the table structure. It needs to be placed within a td
There's a missing . before the value property in the JS.

However the biggest issue is because your repeat the same id attributes on multiple elements as you loop through to create these rows in the HTML. id have to be unique within the DOM.

To fix this use common class attributes on all the elements you need to find instead, then use jQuery's DOM traversal techniques to retrieve them based on the current row.

Also note in the below example that I used an unobtrusive event handler. Inline event attributes are no longer good practice and should be avoided where possible. In addition I removed the inline style attributes and used rules in an external stylesheet. Both of these approaches are preferred due to the Separation of Concerns principle.

With all that said, try this:

jQuery($ => {
  $('.fname').on('input', function() {  
    let $row = $(this).closest('tr');
    let price = $row.find(".artprice").val();
    $row.find('.total strong').text('$' + (this.value * price).toFixed(2));
  });
});

.media a img {
  width: 72px;
  height: 72px;
}

td.quantity {
  text-align: center;
}

One last thing to note is that jQuery 2.2.4 is getting a little old now. You should consider upgrading to 3.x

How to calculate total of a row in a table when quantity changes

Answers (1)

Related Questions