使用删除的动态列的值的总和计算错误答案

【问题标题】：Wrong calculation in the sum of the value of dynamic columns with delete使用删除的动态列的值的总和计算错误
【发布时间】：2017-12-11 17:46:31
【问题描述】：

我正在尝试创建一个餐厅订单表格，在其中我在文本框中输入值，并在使用 Ajax 单击按钮后显示在列表中，其中包含小计和总计。

我的问题是小计的总和给了我错误的值如果我单击删除按钮，则不会更改。

|数量 |价格|小计 |
| 10 | 3.50 | 35.00 |
| 10 | 9.00 | 90.00 |

总计：180.00 而不是 125.00

其中计算行数 x 最后一个小计值。

请查看 TIA 所附的代码 sn-p！

var impo = document.getElementById("imp_text");
var quant = document.getElementById("qta");

$(document).on("click", "table.dynatable button.delete-row", function() {
  $(this).parents("tr").remove();
});

function loaddata() {
  var importo = $("#imp_text").val();
  var quantita = $("#qta").val();
  var totale = importo * quantita;
  var desc_importo = "Altro ";
  var markup = "<tr><td><span class='sum_qta' name='sum_qta'>" + quantita + "</span></td><td>" + desc_importo + "</td><td>" + importo + "</td><td class='subtot' >" + totale + "</td><td><button type='button' class='delete-row'>X</button></td></tr>";

  $("table.dynatable tbody").append(markup);

  var $tblrows = $("#tableordine tbody tr");
  $tblrows.each(function(index) {
    var $tblrow = $(this);

    if (!isNaN(totale)) {

      $tblrow.find('.subtot').val(totale.toFixed(2));
      var grandTotal = 0;

      $(".subtot").each(function() {
        var stval = parseFloat($(this).val());
        grandTotal += isNaN(stval) ? 0 : stval;
      });

      $('.grdtot').val(grandTotal.toFixed(2));
    }

  });
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html lang="en">

<head>
</head>

<body>
  <font color="black">

    <table class="table dynatable" id="tableordine">
      <thead>
        <tr>
          <th>Qty</th>
          <th>Import</th>
          <th>Price</th>
          <th>subtotal</th>
        </tr>
      </thead>
      <tbody>

      </tbody>
    </table>

    <hr/> Totale:<input type="text" class="grdtot">

<hr/>
    <FORM name="Keypad" action="">
      Import : <input name="ReadOut" id="imp_text" type="Text" size=24 value=" "> Quantity : <input type="text" name="readqta" id="qta" value="1" />
      <p>

        <input type="button" id="entraordine" class="add-row menu_button" value="Entra" onclick="loaddata();" />
    </form>
</body>
</html>

【问题讨论】：

我建议您先编写自己的按钮单击事件处理程序，而不是使用onclick="" html 属性。应该是这样的：$("body").on("click", "#entraordine", function(){ //code here });
还有为什么你有val(totale.toFixed(2)) 而不是.val() 在$tblrow.find('.subtot').val(totale.toFixed(2)); ??
@N.Ivanov 这样我就可以将 .subtot 类的值引用为 totale 并将 toFIxed(2) 引用为小数

标签： javascript jquery ajax

【解决方案1】：

这里有解决方案https://jsfiddle.net/tbskqrby/

$(document).on("click", "table.dynatable button.delete-row", function() {
    $(this).parents("tr").remove();
    rowCal();
});

rowCal = function(){
    var $tblrows = $("#tableordine tbody tr");
    $tblrows.each(function(index) {
        var $tblrow = $(this);

        if (!isNaN(totale)) {

            $tblrow.find('.subtot').val(totale.toFixed(2));
            var grandTotal = 0;

            $(".subtot").each(function() {
                var stval = parseFloat($(this).val());
                grandTotal += isNaN(stval) ? 0 : stval;
            });

            $('.grdtot').val(grandTotal.toFixed(2));
       }

   });
}

【讨论】：

现在单击删除按钮时，总值会发生变化，但它给出了错误的总值
@Shiladitya 你能解释一下为什么这是解决方案吗？
@OFBrc 解决方案在这里 jsfiddle.net/tbskqrby/1 。问题在于您的 var stval = parseFloat($(this).val()); .我将其更改为 var stval = parseFloat($(this).text());获取价值。