所有输入字段的总和不是正确答案

【问题标题】：Total of all input fields not coming as correct answer所有输入字段的总和不是正确答案
【发布时间】：2019-05-04 14:21:11
【问题描述】： 

var checkSum = 0;
var jsonData = {};
var pushData;
var trData = [];
var sumData = [];
var chkArray = [];

countTab2 = 1;
$(".add-customs").click(function() {
  customsTable();
});

function customsTable() {
  var markup = "<div class='col-md-1'>Custom</div>" +
    "<div class='col-md-4'><input id='customReason" +
    countTab2 +
    "' type='text' value='' class='txt form-control'" +
    "name='customReason' path='customReason' /></div>" +
    "<div class='col-md-2'><input value='0' type='text' class='txt form-control'" +
    "name='customAmount' id='customAmount" +
    countTab2 +
    "'></div>" +
    "<div class='col-md-2'><input value='0' onchange='getCustomTotal();' type='text' class='txt form-control'" +
    "name='customPenalty' id='customPenalty" +
    countTab2 +
    "'></div>" +
    "<div class='col-md-1'><span id='customSum" +
    countTab2 +
    "'>0</span></div>" +
    "<div class='col-md-2'></div>";
  countTab2++;
  $(".custom-table").append(markup);
}

//adding row for VAT
countTab3 = 1;
$(".add-vat").click(function() {
  vatTable();
});

function vatTable() {
  var markup = "<div class='col-md-1'>VAT</div>" +
    "<div class='col-md-4'><input id='vatReason" +
    countTab3 +
    "' type='text' value='' class='txt1 form-control'" +
    "name='vatReason' /></div>" +
    "<div class='col-md-2'><input type='text' class='txt1 form-control'" +
    "name='vatAmount' value='0' id='vatAmount" +
    countTab3 +
    "'></div>" +
    "<div class='col-md-2'><input type='text' value='0' onchange='getVatTotal();'  class='txt1 form-control'" +
    "name='vatPenalty' id='vatPenalty" +
    countTab3 +
    "'></div>" +
    "<div class='col-md-1'><span id='vatTotal" +
    countTab3 +
    "'></span></div>" +
    "<div class='col-md-2'></div>";
  countTab3++;
  $(".vat-table").append(markup);
}

//adding row for Excise
countTab4 = 1;
$(".add-excise").click(function() {
  exciseTable();
});

function exciseTable() {
  var markup = "<div class='col-md-1'>Excise</div>" +
    "<div class='col-md-4'><input id='exciseReason" +
    countTab4 +
    "' type='text' value='' class='txt2 form-control'" +
    "name='exciseReason' /></div>" +
    "<div class='col-md-2'><input type='text' class='txt2 form-control'" +
    "name='exciseAmount' value='0' id='exciseAmount" +
    countTab4 +
    "'></div>" +
    "<div class='col-md-2'><input type='text' onchange='getExciseTotal();' class='txt2 form-control'" +
    "name='excisePenalty' value='0' id='excisePenalty" +
    countTab4 +
    "'></div>" +
    "<div class='col-md-1'><span id='exciseTotal" +
    countTab4 +
    "'></span></div>" +
    "<div class='col-md-2'></div>";
  countTab4++;
  $(".excise-table").append(markup);
}

customs = [];

function getListCustoms() {

  for (i = 0; i < countTab2; i++) {
    if ($("#customPenalty" + i).length) {
      customs.push({
        assessReason: $("#customReason" + i).val(),
        assessAmount: $("#customAmount" + i).val(),
        assessPenalty: $("#customPenalty" + i).val()
      });
    }
  }
}

function getCustomTotal() {
  var customTotal = 0;
  getListCustoms();
  customs.unshift({
    assessReason: $("#customReason").val(),
    assessAmount: $("#customAmount").val(),
    assessPenalty: $("#customPenalty").val()
  });
  customTotal = customTotal + parseInt(customs[0].assessAmount) +
    parseInt(customs[0].assessPenalty);
  for (i = 1; i < customs.length; i++) {
    customTotal = customTotal + parseInt(customs[i].assessAmount) +
      parseInt(customs[i].assessPenalty);
    customRowTotal = 0;
    customRowTotal = parseInt($("#customAmount" + i).val()) +
      parseInt($("#customPenalty" + i).val());
    $("#customSum" + i).html(customRowTotal);
  }
  getTotalSum();
  $('#tot').html(wholeTotal);
}

$("#customPenalty").change(
  function() {
    totalCustom = 0;
    totalCustom = parseInt($("#customAmount").val()) +
      parseInt($("#customPenalty").val());
    $("#customSum").html(totalCustom);

  });

function getVatTotal() {
  var vatTotal = 0;
  getVatList();
  vats.unshift({
    assessReason: $("#vatReason").val(),
    assessAmount: $("#vatAmount").val(),
    assessPenalty: $("#vatPenalty").val()
  });
  vatTotal = vatTotal + parseInt(vats[0].assessAmount) +
    parseInt(vats[0].assessPenalty);
  for (i = 1; i < vats.length; i++) {
    vatTotal = vatTotal + parseInt(vats[i].assessAmount) +
      parseInt(vats[i].assessPenalty);
    vatRowTotal = 0;
    vatRowTotal = parseInt($("#vatAmount" + i).val()) +
      parseInt($("#vatPenalty" + i).val());
    $("#vatTotal" + i).html(vatRowTotal);
  }
  getTotalSum();
  $('#tot').html(wholeTotal);
}

$("#vatPenalty").change(
  function() {
    totalVat = 0;
    totalVat = parseInt($("#vatAmount").val()) +
      parseInt($("#vatPenalty").val());
    $("#vatTotal").html(totalVat);

  });

vats = [];

function getVatList() {
  for (i = 0; i < countTab3; i++) {
    if ($("#vatPenalty" + i).length) {
      vats.push({
        assessReason: $("#vatReason" + i).val(),
        assessAmount: $("#vatAmount" + i).val(),
        assessPenalty: $("#vatPenalty" + i).val()
      });
    }
  }
}

excises = [];

function getExciseList() {

  for (i = 0; i < countTab4; i++) {
    if ($("#excisePenalty" + i).length) {
      excises.push({
        assessReason: $("#exciseReason" + i).val(),
        assessAmount: $("#exciseAmount" + i).val(),
        assessPenalty: $("#excisePenalty" + i).val()
      });
    }
  }
}

$("#excisePenalty").change(
  function() {
    totalExcise = 0;
    totalExcise = parseInt($("#exciseAmount").val()) +
      parseInt($("#excisePenalty").val());
    /* $("#tot").html(totalVat+totalCustom); */
    $("#exciseTotal").html(totalExcise);

  });

function getExciseTotal() {
  var exciseTotal = 0;
  getExciseList();
  excises.unshift({
    assessReason: $("#exciseReason").val(),
    assessAmount: $("#exciseAmount").val(),
    assessPenalty: $("#excisePenalty").val()
  });
  exciseTotal = exciseTotal + parseInt(excises[0].assessAmount) +
    parseInt(excises[0].assessPenalty);
  for (i = 1; i < excises.length; i++) {
    exciseTotal = exciseTotal + parseInt(excises[i].assessAmount) +
      parseInt(excises[i].assessPenalty);
    exciseRowTotal = 0;
    exciseRowTotal = parseInt($("#exciseAmount" + i).val()) +
      parseInt($("#excisePenalty" + i).val());
    $("#exciseTotal" + i).html(exciseRowTotal);
  }
  getTotalSum();
  $('#tot').html(wholeTotal);
}

function getTotalSum() {
  wholeTotal = 0;
  var allList = customs.concat(vats, excises);
  for (i = 0; i < allList.length; i++) {
    wholeTotal += parseInt(allList[i].assessAmount) + parseInt(allList[i].assessPenalty);
  }
  console.log(wholeTotal);
}




//submit method now
$("form").submit(function() {
  event.preventDefault();
  getTotalSum();

});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<form>
  <div class="col-md-12" style="float: none;">
    <!--  <button onclick="myFunction()" class="pull-right">+</button> -->
    <div style="margin-bottom: 30px;">
      <div class="form-group row">
        <div class="col-md-1"></div>
        <div class="col-md-4">
          <label>Reason</label>
        </div>
        <div class="col-md-2">
          <label>Amount</label>
        </div>
        <div class="col-md-2">
          <label>Penalty</label>
        </div>
        <div class="col-md-1">Total</div>
        <div class="col-md-2">Action</div>
      </div>
      <div class="custom-table row">
        <div class="col-md-1">
          <label>Customs</label>
        </div>
        <div class="col-md-4">
          <input type="text" class="form-control" id="customReason" />
        </div>
        <div class="col-md-2">
          <input type="number" class="form-control txt" id="customAmount" value="0" name="abc" min="0" />
        </div>
        <div class="col-md-2">
          <input type="number" class="form-control txt" id="customPenalty" onchange="getCustomTotal();" value="0" name="abc" min="0" />
        </div>
        <div class="col-md-1">
          <span id="customSum">0</span>
        </div>
        <div class="col-md-2">
          <button class="add-customs">+</button>
        </div>
      </div>
      <div class="vat-table row">
        <div class="col-md-1">
          <label>VAT</label>
        </div>
        <div class="col-md-4">
          <input type="text" class="form-control" id="vatReason" name="vatReason" />
        </div>
        <div class="col-md-2">
          <input type="text" class="form-control txt1" id="vatAmount" value="0" name="vatAmount" min="0" />
        </div>
        <div class="col-md-2">
          <input type="text" class="form-control txt1" id="vatPenalty" value="0" name="vatPenalty" onchange="getVatTotal();" min="0" />
        </div>
        <div class="col-md-1">
          <span id="vatTotal">0</span>
        </div>
        <div class="col-md-2">
          <button class="add-vat">+</button>
        </div>
      </div>
      <div class="excise-table row">
        <div class="col-md-1">
          <label>Excise</label>
        </div>
        <div class="col-md-4">
          <input type="text" class="form-control" id="exciseReason" name="exciseReason" />
        </div>
        <div class="col-md-2">
          <input type="text" class="form-control txt2" id="exciseAmount" value="0" name="exciseAmount" min="0" />
        </div>
        <div class="col-md-2">
          <input type="text" class="form-control txt2" id="excisePenalty" value="0" name="excisePenalty" onchange="getExciseTotal();" min="0" />
        </div>
        <div class="col-md-1">
          <span id="exciseTotal">0</span>
        </div>
        <div class="col-md-2">
          <button class="add-excise">+</button>
        </div>
        <div class="col-md-1 pull-right">
          <label>Total:</label> <b> <span id="tot">0</span></b>
        </div>
      </div>
    </div>
    <button type="submit" class="btn btn-success pull-right">Submit</button>
  </div>
</form>

我的表格是这样的：

相应行的总计已成功显示，但所有输入字段的总计未按预期显示。当我清除一个输入字段时，它的数据不会从总数中减去。我无法获得所有动态输入字段的正确总和。如何在此处进行更改？

更新：

当我在“金额”和“罚款”中输入一些数据时，总数也会在“罚款”“列”之后出现。

我可以像

一样将那些单独的 Total 传递给数组吗？ 
{
 assessmentType: "PRE", 
 assessCatID: 1, 
 assessReason: "11", 
 assessAmount: "22", 
 assessPenalty: "33"
}

我需要一个新字段 customOneRowTotal:22+33 并且需要插入到数组中

更新代码（2018 年 12 月 9 日）：

我有一个调用 API 的 AJAX，它已成功到达我的控制台：

var table = $('#nepal')
        .DataTable(
                {
                    "processing" : true,
                    "ajax" : {
                        "url" : A_PAGE_CONTEXT_PATH
                                + "/form/api/getSelectionByAssessmentOrNonAssessment",
                        dataSrc : ''
                    },
                    "columns" : [ {
                        "data" : "selectionId"
                    }, {
                        "data" : "selectionDate"
                    }, {
                        "data" : "selectedBy"
                    }, {
                        "data" : "eximPanNo"
                    }, {
                        "data" : "eximPanName"
                    }, {
                        "data" : "eximPanAddr"
                    }, {
                        "data" : "eximPanPhone"
                    }, {
                        "data" : "selectionType"
                    }, {
                        "data" : "auditorGroupName"
                    } ]
                });

数据最近显示在 Datatable 上，当我单击单行时，它被选中并填充为：

通过这个 Ajax 调用得到的 JSON 数据是：（我们最近需要从整个 JSON 数据中获取assessCatAmount 数据）

{  
   "selectionId":1,
   "selectionDate":"2075-08-15",
   "selectedBy":"Department",
   "eximPanNo":1234,
   "eximPanName":"PCS",
   "eximPanNameEng":"PCS",
   "eximPanAddr":"KAPAN",
   "eximPanAddrEng":"PCS",
   "eximPanPhone":9843709166,
   "selectionType":"consignment\r\n",
   "consignmentNo":122,
   "consignmentDate":"2018-2-6",
   "productName":null,
   "selectionFromDate":"2018-11-30",
   "selectionToDate":"2018-11-28",
   "agentNo":3,
   "selectionStatus":"1",
   "entryBy":"1",
   "entryDate":"2018-11-25 11:25:11",
   "rStatus":"1",
   "custOfficeId":1,
   "selectionAudit":null,
   "letter":null,
   "auditorGroupName":null,
   "document":null,
   "assessment":{  
      "assessmentNo":1,
      "assessmentType":"PRE",
      "offCode":null,
      "assessmentDate":"2071",
      "assessmentBy":null,
      "totalAssessment":null,
      "selectionId":1,
      "assSec":null,
      "assRule":null,
      "parentAssessmentId":null,
      "appealId":445,
      "demandNo":null,
      "eximCd":null,
      "consignmentNo":null,
      "assessFrom":null,
      "assessTo":null,
      "assessReason":null,
      "reasonDesc":null,
      "intCalUpto":"2070",
      "assessBasis":null,
      "entryBy":"PCS",
      "rStatus":"1"
   },
   "assessCatAmount":[  
      {  
         "assessmentNo":1,
         "assessmentType":"PRE",
         "assessCatId":1,
         "assessReason":"A",
         "assessAmount":1,
         "assessPenalty":2,
         "entryBy":"PCS",
         "rStatus":"1"
      },
      {  
         "assessmentNo":1,
         "assessmentType":"PRE",
         "assessCatId":1,
         "assessReason":"D",
         "assessAmount":3,
         "assessPenalty":4,
         "entryBy":"PCS",
         "rStatus":"1"
      },
      {  
         "assessmentNo":1,
         "assessmentType":"PRE",
         "assessCatId":2,
         "assessReason":"B",
         "assessAmount":5,
         "assessPenalty":6,
         "entryBy":"PCS",
         "rStatus":"1"
      },
      {  
         "assessmentNo":1,
         "assessmentType":"PRE",
         "assessCatId":2,
         "assessReason":"E",
         "assessAmount":7,
         "assessPenalty":8,
         "entryBy":"PCS",
         "rStatus":"1"
      },
      {  
         "assessmentNo":1,
         "assessmentType":"PRE",
         "assessCatId":3,
         "assessReason":"C",
         "assessAmount":9,
         "assessPenalty":10,
         "entryBy":"PCS",
         "rStatus":"1"
      },
      {  
         "assessmentNo":1,
         "assessmentType":"PRE",
         "assessCatId":3,
         "assessReason":"F",
         "assessAmount":10,
         "assessPenalty":10,
         "entryBy":"PCS",
         "rStatus":"1"
      }
   ]
}

现在我们的表格如下：

现在我需要将这六个assessCatAmount 数据填充到此表中。我怎样才能得到这个？

当我点击 Datatable 时，点击的动作发生在：

.selected {
    background-color: #a7d8d3;
}

$('#nepal tbody').on('click', 'tr', function() {
    if ($(this).hasClass('selected')) {
        $(this).removeClass('selected');
    } else {
        table.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
    }
    trDataSecondTable = table.row(this).data();
    console.log(trDataSecondTable);
});

点击数据表的行时，所有内容都存储在 trDataSecondTable 中。

$('#chooseButton')
        .on(
                'click',
                function() {
                    $('.hidden')
                            .css('display', 'block');
                    $("#panEximName")
                            .html(
                                    trDataSecondTable.eximPanNameEng);
                    $("#panEximPhone")
                            .html(
                                    trDataSecondTable.eximPanPhone);
                    for (var i = 0; i < trDataSecondTable.document.length; i++) {
                        if ($("#invoice").val() == trDataSecondTable.document[i].docNameEng) {
                            $("#invoice").prop(
                                    'checked', true);
                        } else if ($("#packingList")
                                .val() == trDataSecondTable.document[i].docNameEng) {
                            $("#packingList").prop(
                                    'checked', true);
                        } else {
                            $("#invoice").prop(
                                    'checked', false);
                            $("#packingList").prop(
                                    'checked', false);
                        }
                    }
                    $("#inoutDate")
                            .val(
                                    trDataSecondTable.letter[0].inoutDate);

                });

【问题讨论】：

    标签： javascript jquery html arrays user-interface


    【解决方案1】：

    您需要委托而不是使用内联事件处理

    1. 委托和克隆 - 我更改了 div 类以匹配海关而不是自定义
    2. 每次更改的总和
    3. 将所有按钮更改为type="button" 以不在[+] 上提交
    4. 我将总计移出消费税行

    function sumIt() {
  $("#formContainer [type=number]").each(function() {
    var $row = $(this).closest(".row");
    var $fields = $row.find("[type=number]");
    var val1 = $fields.eq(0).val();
    var val2 = $fields.eq(1).val();
    var tot = (isNaN(val1) ? 0 : +val1) + (isNaN(val2) ? 0 : +val2)
    $row.find(".sum").text(tot);
  });
  var total = 0;
  $(".sum").each(function() {
    total += isNaN($(this).text()) ? 0 : +$(this).text()
  });
  $("#tot").text(total);
  return total;
}

$(".customs-table .remove:lt(1)").hide();  
$(".vat-table     .remove:lt(1)").hide();  
$(".excise-table  .remove:lt(1)").hide();  

$("#formContainer").on("click", "button", function() {
  var selector = "div.row";
  var $div = $(this).closest(selector);
  if ($(this).is(".add")) {
    var $newDiv = $div.clone();
    $newDiv.find(":input").val(""); // clear all
    $newDiv.find("[type=number]").val(0); // clear numbers
    $newDiv.find(".sum").text(0); // clear total
    $newDiv.insertAfter($div)
  }
  else {
    $div.remove();
     sumIt(); 
  }
  $(".customs-table .remove:gt(0)").show();  
  $(".vat-table     .remove:gt(0)").show();  
  $(".excise-table  .remove:gt(0)").show();  
});


$("#formContainer").on("input", "[type=number]", sumIt);

$("form").submit(function() {
  event.preventDefault();
  var user_profile = [];
  $(".row").each(function() {
    var $fields = $(this).find(":input");
    if ($fields.length > 0) {
      var cat = $(this).find("div>label").eq(0).text(); // use the label of the row
      var catId = ["","Customs","VAT","Excise"].indexOf(cat)
      user_profile.push({
        assessmentType: "PRE",
        assessCatID : catId, 
        assessReason: $fields.eq(0).val(),
        assessAmount: $fields.eq(1).val(),
        assessPenalty: $fields.eq(2).val(),
        assessTotal: +$fields.eq(1).val() + +$fields.eq(2).val() // the leading + makes it a number
      });
    }
  });
  console.log(user_profile);
  /*
  $.ajax({
    url: "someserverfunction",
    data: JSON.encode(user_profile),
    success : function(data) { }
    error: function() { }
  });  
  */
});
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<form id="myForm">
  <div id="formContainer" class="col-md-12" style="float: none;">
    <!--  <button onclick="myFunction()" class="pull-right">+</button> -->
    <div style="margin-bottom: 30px;">
      <div class="form-group row">
        <div class="col-md-1"></div>
        <div class="col-md-4">
          <label>Reason</label>
        </div>
        <div class="col-md-2">
          <label>Amount</label>
        </div>
        <div class="col-md-2">
          <label>Penalty</label>
        </div>
        <div class="col-md-1">Total</div>
        <div class="col-md-2">Action</div>
      </div>
      <div class="customs-table row">
        <div class="col-md-1">
          <label>Customs</label>
        </div>
        <div class="col-md-4">
          <input type="text" class="form-control customReason" />
        </div>
        <div class="col-md-2">
          <input type="number" class="form-control txt customAmount" value="0" name="abc" min="0" />
        </div>
        <div class="col-md-2">
          <input type="number" class="form-control txt customPenalty" value="0" name="abc" min="0" />
        </div>
        <div class="col-md-1">
          <span class="sum">0</span>
        </div>
        <div class="col-md-2">
          <button type="button" class="add">+</button>
          <button type="button" class="remove">-</button>
        </div>
      </div>
      <div class="vat-table row">
        <div class="col-md-1">
          <label>VAT</label>
        </div>
        <div class="col-md-4">
          <input type="text" class="form-control vatReason" name="vatReason" />
        </div>
        <div class="col-md-2">
          <input type="number" class="form-control txt1 vatAmount" value="0" name="vatAmount" min="0" />
        </div>
        <div class="col-md-2">
          <input type="number" class="form-control txt1 vatPenalty" value="0" name="vatPenalty" min="0" />
        </div>
        <div class="col-md-1">
          <span class="sum">0</span>
        </div>
        <div class="col-md-2">
          <button type="button" class="add">+</button>
          <button type="button" class="remove">-</button>
        </div>
      </div>
      <div class="excise-table row">
        <div class="col-md-1">
          <label>Excise</label>
        </div>
        <div class="col-md-4">
          <input type="text" class="form-control exciseReason" name="exciseReason" />
        </div>
        <div class="col-md-2">
          <input type="number" class="form-control txt2 exciseAmount" value="0" name="exciseAmount" min="0" />
        </div>
        <div class="col-md-2">
          <input type="number" class="form-control txt2 excisePenalty" value="0" name="excisePenalty" min="0" />
        </div>
        <div class="col-md-1">
          <span class="sum">0</span>
        </div>
        <div class="col-md-2">
          <button type="button" class="add">+</button>
          <button type="button" class="remove">-</button>
        </div>
      </div>
      <div class="col-md-12 pull-right">
        <label>Total:</label>&nbsp;<b><span id="tot">0</span></b>
      </div>
    </div>
    <button type="submit" class="btn btn-success pull-right">Submit</button>
  </div>
</form>

    【讨论】：

    • 你好先生有没有什么办法也可以传递数组中的那些中间总值？
    • 我不明白你的意思 - 传递到什么时候？
    • 当我在“金额”和“惩罚”中输入一些数据时，总数也会在“惩罚”“列”之后出现。我可以将那些单独的 Total 传递给您最初创建的数组，例如 {assessmentType：“PRE”，assessCatID：1，assessReason：“11”，assessAmount：“22”，assessPenalty：“33”}。我需要一个新字段 customOneRowTotal:22+33 并且需要插入到数组中？如果你甚至不明白，请说我。
    • 你明白我的意思了吗？
    • 您想在每次输入内容或删除内容时对金额进行 Ajax 处理？
    猜你喜欢
    • 1970-01-01
    • 2022-11-13
    • 1970-01-01
    • 2018-06-28
    • 2019-11-29
    • 1970-01-01
    • 2023-01-24
    • 2018-11-18
    • 2020-03-12
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode