Percentage Change Calculator is not working multiple times

Vivek Vivi 0
Viewed 47

I have a percentage change calculator which is working functionally. But I need calculators for each table row. I'm calculating from a table cell and showing result in another cell for sorting purposes.

Problem is, my calculator is only working once in a same table row .trCalculate class. I need it multiple times. Most important thing is I need result in another table cell. Is this possible?

 table {
    border-collapse: collapse;
    font-family: arial;
  }
  
  th {
    border: 1px solid #000;
    padding: 5px;
    border-collapse: collapse;
    font-size: 15px;
  }
  
  td {
    border: 1px solid #000;
    padding: 5px;
    border-collapse: collapse;
    font-size: 15px;
  }
  
  input {
    margin: 3px 0;
    border: 1px solid #00f;
    height: 32px;
    padding-left: 7px;
    font-size: 18px;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.js"></script>

<table>
  <tr>
    <th>Calculator 01</th>
    <th>Calculator 02</th>
    <th>Calculator 01 Result</th>
    <th>Calculator 02 Result</th>
  </tr>
  <tr class="trCalculate">
    <td>
      <input type="text" class="ChangeCalulator CalcFrom" value=""><br>
      <input type="text" class="CalcTo ChangeCalulator" value="1000">
    </td>
    <td>
      <h2 class="CalcResult"></h2>
    </td>
    <td>
      <input type="text" class="ChangeCalulator CalcFrom" value=""></br>
      <input type="text" class="CalcTo ChangeCalulator" value="2000">
    </td>
    <td>
      <h2 class="CalcResult"></h2>
    </td>
  </tr>
</table>

<script>
  $(document).on("change keyup blur live", ".ChangeCalulator", function() { // For:- = Topper To Current %
    let formContainer = $(this).closest('.trCalculate')

    var first = Number($(formContainer).find('.CalcFrom').val()); // = Topper Price
    var second = Number($(formContainer).find('.CalcTo').val()); // = Current Price
    var minus = second - first; // 2000 - 1000 = {1000 = minus}
    var divide = (minus / first); // 1000 / 1000 = 1
    var multiply = divide * 100; // 1 * 100 = 100%
    $(formContainer).find('.CalcResult').val(Number(multiply).toFixed(2));
    $(formContainer).find('.CalcResult').text(Number(multiply).toFixed(2));
  });
</script>

jquery-ui ajax jquery javascript
1 Answers

The issue is because your code is looking for single instances of each group of elements in the tr, even though there is two sets.

To avoid this issue you can instead use closest() to get the parent td instead of the tr, then use next() to get its sibling td to update the output:

$(document).on("input change", ".change-calculator", e => {
  let $td = $(e.currentTarget).closest('td');
  let from = Number($td.find('.calc-from').val());
  let to = Number($td.find('.calc-to').val());
  let result = ((to - from) / from) * 100;
  $td.next().find('.calc-result').text(result.toFixed(2));
});
table {
  border-collapse: collapse;
  font-family: arial;
}

th {
  border: 1px solid #000;
  padding: 5px;
  border-collapse: collapse;
  font-size: 15px;
}

td {
  border: 1px solid #000;
  padding: 5px;
  border-collapse: collapse;
  font-size: 15px;
}

input {
  margin: 3px 0;
  border: 1px solid #00f;
  height: 32px;
  padding-left: 7px;
  font-size: 18px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.js"></script>

<table>
  <tr>
    <th>Calculator 01</th>
    <th>Calculator 02</th>
    <th>Calculator 01 Result</th>
    <th>Calculator 02 Result</th>
  </tr>
  <tr>
    <td>
      <input type="text" class="change-calculator calc-from" value=""><br />
      <input type="text" class="change-calculator calc-to" value="1000">
    </td>
    <td>
      <h2 class="calc-result"></h2>
    </td>
    <td>
      <input type="text" class="change-calculator calc-from" value=""><br />
      <input type="text" class="change-calculator calc-to" value="2000">
    </td>
    <td>
      <h2 class="calc-result"></h2>
    </td>
  </tr>
</table>

Rory McCrossan0
Related