页面上表格金额统计汇总

页面结构：

<!-- 核销退房结算 -->
        <div id="div-checkout-id" class="row cl">
            <label class="form-label col-sm-1"><span class="c-red">退房结算</span></label>
            <div class="formControls col-sm-3">
                <a id="checkout_query_sel" class="btn btn-primary radius ml-20 mr-20">关联退房结算</a>
                
                <input type="hidden" value="${entity.checkoutId}"  id="checkoutId" name="checkoutId">
                <input type="hidden" value="${entity.checkoutInfo?html}"  id="checkoutInfo" name="checkoutInfo">
                <input type="hidden" value="${entity.colAndPayInfo?html}"  id="colAndPayInfo" name="colAndPayInfo">
                <table class="table table-border table-bordered table-bg table-sort" id="table-list-detail-checkout" style="width:600px;">
                    <thead> 
                        <tr>
                            <th width="20%">类型</th>
                            <th width="20%">金额</th>
                            <th width="40%">备注</th>
                            <th width="20%">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                         <tr></tr>
                    </tbody>
                </table>
                <div id="btn-sum"></div>
            </div> 
        </div> 

 

var total=0;
$(function() {
      reloadCheckoutSummay();
    });
function reloadCheckoutSummay() {
  if (!$('#checkout-detail-hidden-pid').val()) {
    return;
  }
  $.getJSON('/checkOutSettlement/findOne', {
        id : $('#checkout-detail-hidden-pid').val()
      }, function(resp) {

        var ret = [];
        ret.push({
              'chargeType' : '水费',
              'total' : resp.payFee1 ,
              'amt' : 0
            });
        ret.push({
              'chargeType' : '电费',
              'total' : resp.payFee2 ,
              'amt' : 0
            });
        ret.push({
              'chargeType' : '煤气费',
              'total' : resp.payFee3  ,
              'amt' : 0
            });
        ret.push({
              'chargeType' : '数字电视费',
              'total' : resp.telephoneFee  ,
              'amt' : 0
            });
        ret.push({
              'chargeType' : '管理费',
              'total' :  resp.managerPrice   ,
              'amt' : 0
            });
        ret.push({
              'chargeType' : '卫生费',
              'total' : resp.healthCosts ,
              'amt' : 0
            });
        ret.push({
              'chargeType' : '损坏维修费',
              'total' : resp.damageRepairCosts ,
              'amt' : 0
            });
        ret.push({
              'chargeType' : '租金滞纳金',
              'total' : resp.fines ,
              'amt' : 0
            });
        ret.push({
              'chargeType' : '需补租金',
              'total' : resp.payFees ,
              'amt' : 0
            });
        ret.push({
              'chargeType' : '转租费',
              'total' : resp.notPayFee ,
              'amt' : 0
            });
        ret.push({
              'chargeType' : '其他',
              'total' :  resp.otherFee  ,
              'amt' : 0
            });

        var arrToShow = [];
        $.getJSON('/checkOutSettlement/findSummaryByPid', {
              pid : $('#checkout-detail-hidden-pid').val()
            }, function(res) {
              $('#checkout-detail-tab > tbody > tr').remove();
              $.each(res, function(i, item) {
                    $.each(ret, function(j, tmp) {
                          if (item.chargeType == tmp.chargeType) {
                            tmp.amt = item.amt;
                          }
                        });
                  });
              $.each(ret, function(j, item) {
                    $('#checkout-detail-tab > tbody').append('<tr>' + '<td>' + item.chargeType + '</td>'
                        + '<td class="c-red">' + item.amt + '</td>'
                        + '<td> <a href="javascript:void(0);" οnclick="reloadCheckoutDetails(this);">加载</a> </td>'
                        + '<td class="c-blue">' + (item.total - item.amt) + '</td><td>'
                        + '<a href="javascript:void(0);" οnclick="addRelationCheckout(this);">关联</a>' + '</td>'
                        + '</tr>');
                  })

            });
      });

}
function addRelationCheckout(href) {
  var curTd = $(href).parent();
  var chargeType = curTd.prev().prev().prev().prev().html();
  var amt = curTd.prev().html();
  if (!$('#table-list-detail-checkout')) {
    return;
  }

  str = '<tr><td>' + '<input type="text" class="input-text" name="checkout_chargeType" value="' + chargeType + '" />' + '</td><td>'
      + '<input type="text" class="input-text amt" name="checkout_amt" value="' + amt + '" />' + '</td><td>'
      + '<input type="text" class="input-text" name="checkout_note" value="" />' + '</td><td>' 
      + '<a style="text-decoration:none;" onClick="deleteItem(this)" href="javascript:;" title="删除"><i class="Hui-iconfont">&#xe631;</i></a>'  
       + '</td></tr>';
  total=(Number(total)+Number(amt)).toFixed(2);
  $('#table-list-detail-checkout > tbody').append(str);
  $('#btn-sum').html('&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp'+
          '<span class="c-red">合计：'+total+'</span>');
}
function reloadCheckoutDetails(href) {
  var curTd = $(href).parent();
  var chargeType = curTd.prev().prev().html();
  $.getJSON('/checkOutSettlement/findByPidAndChargeType', {
        pid : $('#checkout-detail-hidden-pid').val(),
        chargeType : chargeType
      }, function(res) {
        var html = '详情:';
        $.each(res, function(i, item) {
          html += '<br/>'
              + String
                  .format(
                      '<span class="c-blue mr-10 ml-10">时间:</span> {0} , <span class="c-blue mr-10 ml-10">金额:</span> {1} , <span class="c-blue mr-10 ml-10">备注:</span> {2}',
                      item.createDate, item.amt, item.note);
        });
        curTd.html(html);
      });
}

function calCheckoutBal() { // 计算
  if (!$('#id_payFee1')) {
    return {};
  }
  var ret = {};
  ret['水费'] = $('#id_payFee1').val() | 0;
  ret['电费'] = $('#id_payFee2').val() | 0;
  ret['煤气费'] = $('#id_payFee3').val() | 0;
  ret['数字电视费'] = $('#id_telephoneFee').val() | 0;
  ret['管理费'] = $('#id_managerPrice').val() | 0;
  ret['卫生费'] = $('#id_healthCosts').val() | 0;
  ret['损坏维修费'] = $('#id_damageRepairCosts').val() | 0;
  ret['租金滞纳金'] = $('#id_fines').val() | 0;
  ret['需补租金'] = $('#id_payFees').val() | 0;
  ret['转租费'] = $('#id_notPayFee').val() | 0;
  ret['其他'] = $('#id_otherFee').val() | 0;
  return ret;
}

function deleteItem(href){
    var amt=$(href).parent().parent().find(".amt").val();
    console.log(amt);
    total=(Number(total)-Number(amt)).toFixed(2);
    $('#btn-sum').html('&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp'+
            '<span class="c-red">合计：'+total+'</span>');
    $(href).parent().parent().remove();
}