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

Sum the cell from another cell in html using jquery and show result in another cell

I want to sum focused cell in a table from another cell of same row and paste result in a total column of that row.

Below is my code.

alert($(this).find(‘#table tr td input#quantity’).val());

But its not working as giving me Undefined/Nan Error in alert.

ScreenShot

Tags:

2

Answers


  1. 0

    I recommend to use CSS classes instead of IDs that will allow you to calculate a separate row and have any numbers of rows. An example of the total sum is also provided.

    $('#table').on('input', 'input:not(.sum, .total)', e => {

  const $table = $(e.originalEvent.currentTarget);
  const $row = $(e.target).closest('tr');
  
  const calcSum = (elem, from) => {
    const sum = [...from].reduce((sum, elem) => {
      const val = parseFloat(elem.value);
      return sum + (val === val ? val : 0);
    }, 0) || NaN;
    elem.val(sum === sum ? sum : '');
  };
  
  // calc sum of the row
  calcSum($row.find('.sum'), $row.find(':not(.sum)'));
 
  // calc total
  calcSum($table.find('.total'), $table.find('.sum'));
 
});
    input{
  max-width:100px;
  text-align: center;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
  <tr>
    <td><input></td>
    <td><input></td>
    <td><input></td>
    <td><input></td>
    <td><input readonly class="sum" placeholder="Sum"></td>
  </tr>
  <tr>
    <td><input></td>
    <td><input></td>
    <td><input></td>
    <td><input></td>
    <td><input readonly class="sum" placeholder="Sum"></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td><input readonly class="total" placeholder="Total"></td>
  </tr>  
</table>
    Login or Signup to reply.
  2. 0 
    <!DOCTYPE html>
<html>
<body>

<!DOCTYPE html>
<html>
<head>
  <title> Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <table id="table">
    <thead>
      <tr>
        <th>Input 1</th>
        <th>Input 2</th>
        <th>Input 3</th>
        <th>Input 4</th>
        <th>Input 5</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="text" class="input-box" /></td>
        <td><input type="text" class="input-box" /></td>
        <td><input type="text" class="input-box" /></td>
        <td><input type="text" class="input-box" /></td>
        <td><input type="text" class="input-box" /></td>
        <td><input type="text" class="total-input" readonly /></td>
      </tr>
      <!-- Add more rows as needed -->
    </tbody>
  </table>

  <script src="script.js"></script>
</body>
</html>


<script>
$(document).ready(function() {
  // Function to update the total
  function updateTotal(row) {
    var total = 0;
    var inputs = row.find('.input-box');

    // Iterate through each input box in the current row
    inputs.each(function() {
      var value = parseFloat($(this).val());

      // Check if the value is a valid number
      if (!isNaN(value)) {
        total += value;
      }
    });

    // Set the total value in the last input box of the same row
    row.find('.total-input').val(total);
  }

  // Listen for input changes on the input boxes
  $('.input-box').on('input', function() {
    var row = $(this).closest('tr');
    updateTotal(row);
  });
});

</script>

</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search