通过键盘弹起事件去监听总金额的动态变化

                 通过键盘弹起事件去监听总金额的动态变化

1、 面对一些需要动态更新的数据，如总金额、总数量之类的时候，那么我们就不得不去考虑总金额和数量的动态改变。

2、
如同在上面这张图片里，不难看出这是新增一张单据，一张单据里也就有多个商品，每个商品都有自己的单价和数量和金额，那么每个商品的总金额都是由数量单价 + 税额=总金额，那么我们就需要去监听数量和单价，因为金额会随着数量或者单价的值的改变而改变，同时下面的总计金额也是一样，单据总计金额是通过每个商品的总金额加上税额和其他费用的改变而改变
3、 在面对这多条数据的之间都存在互相影响的关系里我们就得去设置计算公式，计算公式并不复杂，就是简单的加减乘除。
4、 通过input[name=‘SIDStockQuantity’]“可以选择到每一条商品的数量，给它们一个键盘弹起事件，这样就可以动态去计算金额 ，同时我也给输入框做了一个限制，就是不能输入除了数字和小数点之外的任何字符。
5、 键盘弹起事件
$(”#jinhuodingdID").on(“keyup”, “input[name=‘SIDStockQuantity’]”, function () {
var stnum = $(this).val();//获取到输入框的内容
$(this).val(stnum.replace(/[^\d.]/g, ‘’));//检查是否存在除了数字和小数点之外的字符，如果存在就将这些字符去除掉，当然这种写法有一个弊端那么就是如果你是通过输入文字输入的情况下有时候会拦截不住，出现输入文字的或其他字符的情况
var stnum1 = $(this).val();//获取到数量
var num1 = $(this).parent().next().children().val();//获取到单价
var num2 = $(this).parent().next().next().next().children().val();//获取到税率
var num3 = stnum1 * num1; //得到商品商品金额（不包含税额）
var num4 = num2 / 100 * num3 //得到税额
$(this).parent().next().next().children().val(num3); //选择到金额输入框，将得到的新的数据回填到金额输入框里 $(this).parent().next().next().next().next().children().val(num4.toFixed(2)); //选择到税额输入框，将得到的新的数据回填到税额输入框里

6、 });

7、 如同上面就能实现总计金额的动态计算，当然这里只写了数量的改变触发计算总计金额，其他的也是同样的原理。

8、 实现效果如下：注意看图一和图二的区别，在于图一的第一条商品的数量为1,图二的第一条商品的数量从1变成了33，同时它的金额和税额也发生了变化，而且下面的总计金额也发生了改变。
图一：

图二：