jquery 实现DataTable表格中，药品总价格随数量或单价的变化发生动态变化

来源：互联网发布：centos yum 编辑：程序博客网时间：2024/04/29 23:24

想要实现的效果
html页面代码在此省略，表格使用 DataTable实现的,先看需要写的几个事件： 数量变化事件 ，批发单价变化事件 ，总批发金额事件
总批发金额事件

  function totalPrice(){     var intVal = function(i){           return typeof i === 'string' ? i.replace(/[,]/g, '')*1 :            typeof i === 'number' ? i : 0;      };    var totalPriceId = $("#totalPrise");//总批发金额id    var total = 0;    $('.rowSum').each(function(){//table第10列批发总价        total += intVal($(this).html());    })    totalPriceId.html('￥'+total).css('color','#DD4B39');}

总批发金额事件

function changeRowNumber(){    //数量输入框 <input class='number'/>    //批发价输入框 <input class='price'/>    $(".number").bind('input propertychange',function(event){        var $that = $(this),        $rowPrice = $(this).parents('tr').find('input.price');        var rowSum = $that.val()* $rowPrice.val();        $(this).parents('tr').find(".rowSum").html(rowSum);        totalPrice();    });}

批发单价变化事件

function changeRowPrice(){   //数量输入框 <input class='number'/>    //批发价输入框 <input class='price'/>    $(".price").on('input propertychange',function(event){        var $that = $(this),        $rowNum = $(this).parents('tr').find('input.number');        var rowSum = $that.val()* $rowNum.val();        $(this).parents('tr').find(".rowSum").html(rowSum);        totalPrie();    });}

最后在页面加载完成后执行

$(function(){    .....    totalPrice();    changeRowNumber();    changeRowPrice();})

阅读全文

0 0