-2

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

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Erik Margony
  • 11
  • 1
  • 6

1 Answers1

0

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.

andrepaulo
  • 816
  • 11
  • 24