How can I show a calculation result in a table cell?-CodePudding

I have a jQuery percentage calculator which is showing a result in a heading element. I want to show result in the table cell instead. You can check code below. Please help me.

$(document).on("change keyup blur live", "input", ".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));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.js"></script>
<table>
  <tr>
    <th>Calculator 01</th>
    <th>Calculator 01 Result</th>
    <th>Calculator 02</th>
    <th>Calculator 02 Result</th>
  </tr>
  <tr>
    <td>
      <input type="text"  value=""><br />
      <input type="text"  value="1000">
    </td>
    <td>
      <h2 ></h2>
    </td>
    <td>
      <input type="text"  value=""><br />
      <input type="text"  value="2000">
    </td>
    <td>
      <h2 ></h2>
    </td>
  </tr>
</table>

CodePudding user response：

Move the target class from the heading to the parent table cell.
Remove the heading element.
Update the final selector to eliminate the find function.

Note that I'm using const instead of let, as these are values that won't be changed.

Also, I'm not sure why you had "input" as a second argument in your on() function. I assumed that it was intended to be another event, so I moved it.

$(document).on("change keyup blur live input", ".change-calculator", e => {
  const $td = $(e.currentTarget).closest('td');
  const from = Number($td.find('.calc-from').val());
  const to = Number($td.find('.calc-to').val());
  const result = ((to - from) / from) * 100;
  $td.next().text(result.toFixed(2));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.js"></script>

<table>
  <tr>
    <th>Calculator 01</th>
    <th>Calculator 01 Result</th>
    <th>Calculator 02</th>
    <th>Calculator 02 Result</th>
  </tr>

  <tr>
    <td>
      <input type="text"  value=""><br />
      <input type="text"  value="1000">
    </td>
    <td ></td>
    <td>
      <input type="text"  value=""><br />
      <input type="text"  value="2000">
    </td>
    <td ></td>
  </tr>
</table>

CodePudding user response：

Consider the following.

$(function() {
  function calcPerc(a, b) {
    a = parseFloat(a);
    b = parseFloat(b);
    if (b == 0) {
      return NaN;
    }
    return ((a - b) / b) * 100;
  }
  $("table tbody tr").on("change keyup blur live", ".change-calculator", e => {
    let $td = $(e.currentTarget).closest('td');
    let from = $td.find('.calc-from').val();
    let to = $td.find('.calc-to').val();
    let result = calcPerc(to, from);
    if (isNaN(result)) {
      $td.next('.calc-result').text("");
    } else {
      $td.next('.calc-result').text(result.toFixed(2));
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.js"></script>
<table>
  <tr>
    <th>Calculator 01</th>
    <th>Calculator 01 Result</th>
    <th>Calculator 02</th>
    <th>Calculator 02 Result</th>
  </tr>
  <tr>
    <td>
      <input type="text"  value=""><br />
      <input type="text"  value="1000">
    </td>
    <td >
    </td>
    <td>
      <input type="text"  value=""><br />
      <input type="text"  value="2000">
    </td>
    <td >
    </td>
  </tr>
</table>

Minor change to HTML so that <h2> is no longer targeted.

Added function to make calculations easier.