实现表格自动计算

先来看看实时操作动画演示：

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

计算总计：

 

jQuery code:

CalcSum();

        function CalcSum()
        {
            var total_sum = 0;
            $("#Order .txtAmount").each(function () {
                var val = $(this).val();
                if ($.isNumeric(val)) {
                    total_sum += parseFloat(val);
                }                  
            });

            $("#total").html(total_sum);
        }

Source Code

 

数量列任何一个文件框数据变化事件：

 

jQuery code:

 $("#Order").on('input', '.txtQuantity', function () {
            var self = $(this);
            var tr = self.closest("tr");

            var quantity = self.val();
            var Price = tr.find(".txtPrice").val();

            var amount = 0
            if ($.isNumeric(quantity) && $.isNumeric(Price)) {
                amount = quantity * Price;
            }
            tr.find(".txtAmount").val(amount);
            
            CalcSum();
        });

Source Code

 

表中单价列任一文本框数据值变化事件：

 

jQuery code:

$("#Order").on('input', '.txtPrice', function () {
            var self = $(this);
            var tr = self.closest("tr");

            var quantity = tr.find(".txtQuantity").val();
            var Price = self.val();

            var amount = 0
            if ($.isNumeric(quantity) && $.isNumeric(Price)) {
                amount = quantity * Price;
            }            
            tr.find(".txtAmount").val(amount);

            calcSum();
        });

Source Code