表 Javascript 中的小计和总计数

Posted 2023-05-08

【中文标题】表 Javascript 中的小计和总计数

【英文标题】：Subtotal and total count in table Javascript

【发布时间】：2017-03-04 20:51:56

【问题描述】：

我需要您的支持来计算 html 表格中的小计和总计（不带按钮）。

表格公式： 小计：第 1 列 * 第 2 列（输入） 总计：小计之和

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

例如示例屏幕：

【参考方案1】：

这将是你的开始。

首先，您的表格中不需要该部分：

<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更新。

希望对你有帮助。

【讨论】：

非常感谢！很棒的回复。