Can I total sum each row in the table and then disabled it with a checkbox?

Question

I have some trouble with my code. The problem is when I use each() , it loop from the first cell to the end of the row and get every value from it. I just want it to get the value from each row and then when I give it a specific number it will calculate the total and print at the end of the row. When I clicked the checkbox the input will be enabled and when I clicked again it will be disabled and the text in its with the total sum also disappear

 function de() { document.getElementById('check1').onchange = function() { document.getElementById('text1').disabled = !this.checked; }; document.getElementById('check2').onchange = function() { document.getElementById('text2').disabled = !this.checked; }; } $(document).ready(function() { $("input:text").change(function() { var sum = 0; $("#productbody tr").each(function(index, tr) { var price = $(tr).find("td:eq(2)").text(); var amount = $("input:text").val(); if ($("input:text").val() > 0) { sum = parseInt(price) * amount; $(tr).find("td:eq(4)").text(tong); } }); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table border="1" id="product" class="class"> <tr> <td> </td> <td>Product</td> <td>price</td> <td>amount</td> <td>Total</td> </tr> <tbody id="productbody"> <tr> <td><input type="checkbox" id="check1" onClick="de()" /> </td> <td>iPhone9</td> <td>700</td> <td><input type="text" id="text1" disabled /></td> <td></td> </tr> <tr> <td><input type="checkbox" id="check2" onClick="de()" /> </td> <td>Samsung Star</td> <td>1500</td> <td><input id="text2" disabled></td> <td></td> </tr> </tbody> </table> 

https://jsfiddle.net/pa9hywex/1/

I expect the output was about total sum each row when I give the amount number to that row. But actually, it also gives the result to the second row which I haven't checked the checkbox to enable the input

Answer 1

Please try the below code.

$(document).ready(function() {
  $("#productbody tr").find("input:text").change(function() {
    var tong = 0;
    var price = $(this).closest('tr').find("td:eq(2)").text();
    var amount = $(this).val();
    if (amount > 0) {
      tong = parseInt(price) * amount;
      $(this).closest('tr').find("td:eq(4)").text(tong);
    }
  });
});

Fiddle: https://jsfiddle.net/vjna2cy7/

Answer 2

Your for each should be like this

$(document).ready(function() {

$("input:text").change(function() {

$("#productbody tr").each(function(index, tr) {
var tong = 0;
  var price = $(tr).find("td:eq(2)").text();
  var amount =parseInt($(tr).find("input:text").val());
  if (amount > 0) {
    tong = parseInt(price) * amount;
    $(tr).find("td:eq(4)").text(tong);

    }
   });
 });
});

Answer 3

Your problem is that you are needlessly iterating through all the rows when only the amount of a single row has changed. What you are looking here is the context of the calculation: in this case, the context is the closest <tr> element, and you want to perform calculations using information in that row only.

Therefore, in the change event of the input, all you need is:

1. Get the parent table row. This is done by using $(this).closest('tr')
2. Get the price and amount from the correct columns of the row. Instead of using parseInt() , you can use the unary operator + to convert a string to number.

This should work:

 $(document).ready(function() { $("input:text").change(function() { var $row = $(this).closest('tr'); var $total = $row.find('td:eq(4)'); var price = +$row.find('td:eq(2)').text(); var amount = +this.value; $total.text(price * amount); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table border="1" id="product" class="class"> <tr> <td> </td> <td>Product</td> <td>price</td> <td>amount</td> <td>Total</td> </tr> <tbody id="productbody"> <tr> <td><input type="checkbox" id="check1" onClick="de()" /> </td> <td>iPhone9</td> <td>700</td> <td><input type="text" id="text1" disabled /></td> <td></td> </tr> <tr> <td><input type="checkbox" id="check2" onClick="de()" /> </td> <td>Samsung Star</td> <td>1500</td> <td><input id="text2" disabled></td> <td></td> </tr> </tbody> </table> <script> function de() { document.getElementById('check1').onchange = function() { document.getElementById('text1').disabled = !this.checked; }; document.getElementById('check2').onchange = function() { document.getElementById('text2').disabled = !this.checked; }; } </script>