Search code examples
javascripthtmlsumhtml-tablesubtotal

Subtotal and total count in table Javascript


I will need your support to count subtotal and total in html table (without buttons).

Formulas of table:
Subtotal: 1st column * 2nd column (inputs)
Total: Sum of subtotals

<table rowspan="0" id="res">

<table rowspan="0" id="res">
  <tr>
      <th>Bank</th>
      <th>Qty</th>
      <th>Subtotal</th>
  </tr>
  <tr>
      <td>5000</td>
      <td><input type="text"></td>
      <td></td>
  </tr>
  <tr>
      <td>2000</td>
      <td><input type="text"></td>
      <td></td>
  </tr>
  <tr>
      <td>1000</td>
      <td><input type="text"></td>
      <td></td>
  </tr>
  <tr>
      <td>500</td>
      <td><input type="text"></td>
      <td></td>
  </tr>
  <tr>
      <td>200</td>
      <td><input type="text"></td>
      <td></td>
  </tr>
  <tr>
      <td>100</td>
      <td><input type="text"></td>
      <td></td>
  </tr>
  <tr>
      <td>50</td>
      <td><input type="text"></td>
      <td></td>
  </tr>
  <tr>
      <td>20</td>
      <td><input type="text"></td>
      <td></td>
  </tr>
  <tr>
      <td>10</td>
      <td><input type="text"></td>
      <td></td>
  </tr>
  <tr>
      <td>5</td>
      <td><input type="text"></td>
      <td></td>
  </tr>
  <tr>
      <td>2</td>
      <td><input type="text"></td>
      <td></td>
  </tr>
  <tr>
      <td>1</td>
      <td><input type="text"></td>
      <td></td>
  </tr>
  <tr>
      <td colspan="3"></td>
  </tr>
  <tr>
      <td>Total</td>
      <td></td>
      <td>CZK</td>
  </tr>

</table>

https://jsfiddle.net/Lm6mf95z/

E.G. screen of example:

image of table explain


Solution

  • This would be a start for you.

    firstly, you dont't need that part in your table:

    <tr>
        <td colspan="3"></td>
    </tr>  
    

    your can add this jQuery to execute the inner function for every event change that occurs to an input field of your page:

    jQuery(document).on('change', 'input', function() {
      var total = .0;
      $('#res tr:not(:first)').each(function(i,item){ 
    
      var tds = $(item).find('td');
      var celQty = $(tds[1]);
      var inputQty = $(celQty.find('input')[0]);
      var qty = parseFloat(inputQty.val()); 
    
            if($(tds[0]).text() == "Total"){
        $(tds[1]).text(total);
      }else {
        var bankColValue = parseFloat($(tds[0]).text());
        var colSubTotal = $(tds[2]);
        var valItem = bankColValue * (isNaN(qty)? 0: qty);
        colSubTotal.text(valItem);
        total += valItem;
      }
    
    });
    

    });

    Follow the Fiddle updated.

    Hope it helps.