table Javascript 中的小计和总计数

Question

我需要你的支持来计算 html table 中的小计和总计（没有按钮）。

table的公式：
小计：第一列 * 第二列（输入）
合计：小计之和

<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/

示例屏幕：

Answer 1

这对你来说是一个开始。

首先，您不需要 table:

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

您可以添加此 jQuery 来为页面的 input 字段中发生的每个事件 change 执行内部函数：

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;
  }

});

});

关注Fiddle更新。

希望对您有所帮助。

table Javascript 中的小计和总计数

Subtotal and total count in table Javascript

html

javascript

html-table

sum

subtotal