实现表格自动计算

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

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