实现表格自动计算
来源:互联网 发布:miui9怎么卸载软件 编辑:程序博客网 时间:2024/05/18 21:11
先来看看实时操作动画演示:
每一行进行小计,数量 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>
计算总计:
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); }
数量列任何一个文件框数据变化事件:
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(); });
表中单价列任一文本框数据值变化事件:
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(); });
0 0
- 实现表格自动计算
- 实现表格自动计算
- js实现自动生成表格
- js实现自动生成表格
- delphi实现自动创建Acess的表格
- js实现多个表格自动增删
- jq实现表格自动增行
- QTableWidget中实现表格的自动换行
- [转]用WORD编写自动计算与自动更新的表格
- Java自动计算表格某一数字列的和
- Java自动计算表格某一数字列的和(2)
- EhLib表格控件DBGridEh自动排序、自动过滤的实现
- 表格中自动布局注意和使用自动计算行高
- js操作GridView,实现自动计算
- lisp实现自动递归---SICP不确定性计算
- 用简单的VBA实现Excel表格计算
- Ado操作excel表格实现成绩计算及统计
- Ado操作excel表格实现成绩计算及统计
- Eclipse上的HTML/JSP/XML编辑器插件Eclipse HTML Editor安装(eclipse中web开发插件安装)
- 人生轨迹因态度而改变,年轻就要翻腾
- 关于远程登录和文件传输
- linux基础
- 空调制热模式开机后,外风机转
- 实现表格自动计算
- 全双工、半双工
- MYSQL sql 语句性能分析
- Android Studio 从历史记录找回代码
- 深入理解ES7的async/await
- PHP中的的大括号(花括号{})使用详解
- 笔记-关于图片批量上传
- 字符串水题_CJ
- 51NOD算法马拉松 七星剑 【dp】