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

每一行进行小计,数量 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

相关文章: