先来看看实时操作动画演示:
实现表格自动计算

每一行进行小计,数量 X 单价。而总计则是把表格中小计列所有行进行相加。

Html code:

<table id="Order">
    <tr>
        <th>费用名目</th>
        <th>数量</th>
        <th>单价</th>
        <th>小计</th>
    </tr>
    <tr class="trData">
        <td>ItemA</td>
        <td><input type="text" class='txtQuantity' /></td>
        <td><input type="text" class='txtPrice' /></td>
        <td><input type="text" class='txtAmount' /></td>
    </tr>
    <tr class="trData">
        <td>ItemB</td>
        <td><input type="text" class='txtQuantity' /></td>
        <td><input type="text" class='txtPrice' /></td>
        <td><input type="text" class='txtAmount' /></td>
    </tr>
    <tr class="trData">
        <td>ItemC</td>
        <td><input type="text" class='txtQuantity' /></td>
        <td><input type="text" class='txtPrice' /></td>
        <td><input type="text" class='txtAmount' /></td>
    </tr>
    <tr class="trData">
        <td colspan="3" style="text-align:right;">总计</td>        
        <td><span id="total"></span></td>
    </tr>
</table>
Source Code

相关文章:

  • 2022-03-08
  • 2021-12-12
  • 2021-06-11
  • 2022-12-23
  • 2021-09-16
  • 2022-01-08
  • 2021-08-15
  • 2021-06-05
猜你喜欢
  • 2021-08-23
  • 2022-12-23
  • 2021-11-30
  • 2022-01-07
  • 2022-01-31
  • 2022-12-23
相关资源
相似解决方案