Question 36665 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How can I show a calculation result in a table cell? – Jquery

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" 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>
Tags:

2

Answers


  1. 0
    1. Move the target class from the heading to the parent table cell.
    2. Remove the heading element.
    3. 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" class="change-calculator calc-from" value=""><br />
      <input type="text" class="change-calculator calc-to" value="1000">
    </td>
    <td class="calc-result"></td>
    <td>
      <input type="text" class="change-calculator calc-from" value=""><br />
      <input type="text" class="change-calculator calc-to" value="2000">
    </td>
    <td class="calc-result"></td>
  </tr>
</table>
    Login or Signup to reply.
  2. 0

    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" class="change-calculator calc-from" value=""><br />
      <input type="text" class="change-calculator calc-to" value="1000">
    </td>
    <td class="calc-result">
    </td>
    <td>
      <input type="text" class="change-calculator calc-from" value=""><br />
      <input type="text" class="change-calculator calc-to" value="2000">
    </td>
    <td class="calc-result">
    </td>
  </tr>
</table>

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

    Added function to make calculations easier.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search