javascript - 删除动态列的值的总和计算错误

标签 javascript jquery ajax

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

我的问题是小计总和给出了错误的值 如果我点击删除按钮也不会改变。

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

总计:180.00 而不是 125.00

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

请查看随附的 TIA 代码片段!

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>

最佳答案

这里是解决方案 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));
       }

   });
}

关于javascript - 删除动态列的值的总和计算错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44970585/

相关文章:

javascript - 使用 d3js 动画 SVG 路径

javascript - 如何在 Chai 中模拟或 stub 'instanceof' |诗农 |摩卡

javascript - MVC 5 - 将下拉选项设置为在文档准备好时选择后,为什么会重置?

mvc 布局中的 jquery 脚本不起作用

javascript - 如何公开 ES6 block 内的数据?

javascript - 本地存储集项目替换而不是更新

javascript - 异步 JavaScript 回调

jquery - 隐藏时停止 Flash 视频

javascript - Chrome 扩展脚本仅在显示弹出窗口时运行

php - 如何通过ajax将回显响应(文本)放入警告框中?