原始js列表里面的数量金额总价等计算求和求差示例

HTML

                <div class="box-solid">
                  <div class="box-header with-border">
                    <h3 class="box-title">销售产品</h3>
                  </div>


                <div class="form-group">
                  <label for="warehouse" class="col-sm-2 control-label">选择产品</label>
                  <div class="col-sm-10 col-md-4">
                      <button type='button' class='btn btn-primary btn-sm lyxopensb' id='tan-btn'>选择产品</button>
                  </div>
                </div>
<div class="form-group">
    <label for="work_desc" class="col-sm-2 control-label"></label>
                <div class="box-body table-responsive">
                    <table class="table table-hover table-bordered datatable" width="100%" id="buyTable">
                        <thead>
                        <tr>
                          <th style="width: 70px;">操作</th>
                          <th>编码</th>
                          <th>名称</th>
                          <th>牌号</th>
                          <th>区域</th>
                          <th>数量（吨）</th>
                          <th>销售单价（元）</th>
                          <th>销售金额</th>

                        </tr>
                        </thead>
                        <tbody class='tbody1'>
                        {if isset($data.detail)}
                        {foreach name="data.detail" id="item"}
                        <tr>
                          <td class="pat_del"><!-- <button>删除</button> -->
                            <input type="hidden" name="pro_id[]" value="{$item.id}">
                            <input type="hidden" name="pro_product_id[]" value="{$item.product_id}"></td>
                            <!-- <input type="hidden" id="pro_product_id[]" name="pro_product_id[]" value="{$item.product_id}"> -->
                          <td>{$item.product.code}</td>
                          <td>{$item.product.name}</td>
                          <td>{$item.product.card}</td>
                          <td>{$item.product.area}</td>
                          <td><input class="form-control decimal pro_num" placeholder="数量（吨)" name="pro_num[]" value="{$item.num}"></td>
                          <td><input class="form-control decimal pro_price" placeholder="采购单价（元）" name="pro_price[]" value="{$item.price}"></td>
                          <td><input class="form-control decimal pro_amount" placeholder="采购金额"  name="pro_amount[]" value="{$item.amount}"></td>
                        </tr>
                        {/foreach}
                        {/if}
                        </tbody>
                    </table>
                </div>

</div>
                  </div>
                  <script type="text/javascript">
  $(".lyxopensb").click(function() {
    var ids = document.getElementsByName("product_id[]");
    console.log(ids,"ids")
    let idsArr = []
    for(let n=0;n<ids.length;n++) {
      console.log(ids[n].value,"ids[n].value",n)
      idsArr.push(ids[n].value)
      console.log(idsArr,"idsArr",ids,"ids")
    }
    // 是否是指派页面
    // window.IspPoint = false;
    parent.layer.open({
    type : 2,//弹窗类型 ['dialog', 'page', 'iframe', 'loading', 'tips']
    area : [ '1010px', '620px' ],
    shift : 2,//可选动画类型0-6
    scrollbar : false,
    title : false,
    closeBtn : false,
    content : "{:url('product/lstshow')}"+"?del_id="+idsArr,
    btn: ['确定','取消'],
  //这里yes:function为设置的第一个按钮的function，后面设置的按钮默认点击关闭
    yes:function(index,layero){
        //需要回显的值
        //layero为当前的DOM对象，去找打开的iframe转成DOM对象调用子页面其中的function (callbackdata)
        var res = $(layero).find("iframe")[0].contentWindow.callbackdata();
        //把回显的值赋给需要显示的地方
        console.log(res,"111")
      for(let i = 0;i<res.length;i++) {
        $(".tbody1").append('<tr><td class="pat_del"><button>删除</button><input type="hidden" name="pro_product_id[]" '+'value="'+res[i][0]+'"></td>'+
          '<td><input class="form-control" placeholder="编码" readonly '+'value="'+res[i][1]+'"></td>'+
          '<td><input class="form-control" placeholder="名称" readonly '+'value="'+res[i][2]+'"></td>'+
          '<td><input class="form-control" placeholder="牌号" readonly '+'value="'+res[i][3]+'"></td>'+
          '<td><input class="form-control" placeholder="产地" readonly name="pro_origin[]"'+' value="'+res[i][4]+'"></td>'+
          '<td><input class="form-control decimal pro_num" placeholder="数量（吨)" name="pro_num[]"'+' value=""></td>'+
          '<td><input class="form-control decimal pro_price" placeholder="采购单价（元）" name="pro_price[]"'+' value=""></td>'+
          '<td><input class="form-control decimal pro_amount" placeholder="采购金额"  name="pro_amount[]" value=""></td>')
        }
        $(".pat_del").on("click",function(){  
	      if(confirm("确定要删除吗?")){  
	      	$(this).parents("tr").remove();  
	      }   
      });
        //关闭子页面
        parent.layer.close(index);
    }
    });
});
                  </script>

js

    var $gridTable = $('#buyTable');
    //单价*金额=销售金额   毛利=(销售单价-进货价）*多的哪一方的货的数量
    $gridTable.on('keyup', ".decimal", function () {
        var tr = $(this).parent().parent();
        var num =tr.find(".pro_num").val()//销售数量
        var price =tr.find(".pro_price").val()//销售单价
        // var $amount =tr.find(".pro_amount").val()//销售总价
　　    var amount = Number(num) * Number(price);
        tr.find(".pro_amount").val(amount.toFixed(2))//销售总价
        // return false;
    });