删除项目时的JavaScript计算

JavaScript calculation when items are deleted

本文关键字：计算 JavaScript 删除项目更新时间：2023-09-26

从表中删除一行时遇到问题。我有一个计算总价、小计等的函数，效果很好。

但是，如果我删除一行，它将不会重新计算，即删除成本。

1）我该怎么解决这个问题
2）如何使NaN不出现在"总价"列中-固定
3）我不是JavaScript方面的专家，所以如果能在改进现有代码方面提供任何帮助，我们将不胜感激！

EDIT：在代码段中包含用于删除行的x（问题是当你在一行中输入值时，它会计算它们，然后当你删除行时，它不会从总数中删除值）

$(function() {
  $(".calculate-rows").keyup(function(event) {
    var total = 0;
    $(".calculate-rows").each(function() {
      var gtotal = 0;
      $(this).find(".rows").each(function() {
        var qty = parseFloat($(this).find(".quantity").val());
        var rate = parseFloat($(this).find(".unit-price").val());
        if (isNaN(qty)) {
          qty = 0;
        }
        if (isNaN(rate)) {
          rate = 0;
        }
        var subtotal = qty * rate;
        var subtotal = qty * rate;
        $(this).find(".total-price").val(subtotal.toFixed(2));
        if (!isNaN(subtotal))
          gtotal += subtotal;
        $(".subtotal").html("&#163;" + gtotal.toFixed(2));
        var discount = $('.discount').val();
        var discount = ((gtotal / 100) * discount);
        var total = (gtotal - discount).toFixed(2);
        if (!isNaN(total))
          $(".total-price").html("&#163;" + total);
      });
    });
  });
});
var wrapper = $('#addrow');
var newitem = $('.newitem');
var removeitem = $('.removeitem');
$(newitem).click(function(e) {
  e.preventDefault();
  $newrow = $('<tr class="rows"><td style="border-top: none;"><input class="form-control" type="text" name="name" required></td><td style="border-top: none;"><textarea class="form-control" rows="1" name="description"></textarea></td><td style="border-top: none;"><input class="text-center form-control quantity" type="text" value="" name="quantity"></td><td style="border-top: none;"><input class="text-center form-control unit-price" type="text" value="" name="unit_price"></td><td style="border-top: none;"><input class="form-control text-center total-price" type="text" value="0.00" readonly></td><td style="border-top: none;" class="text-center"><a class="removeitem" href="#"><i class="fa fa-times"></i></a></td></tr>');
  $(wrapper).append($newrow);
  $newrow.on("click", "a", function(e) {
    e.preventDefault();
    $(this).parent().parent().remove();
  });
});
$(removeitem).click(function(e) {
  e.preventDefault();
  $(this).parent().parent().remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="table-responsive calculate-rows">
  <table class="table">
    <thead>
      <a href="#" class="btn newitem btn-primary tooltip-primary"><i class="fa fa-plus"></i> New Item</a>
      <tr>
        <th style="width:25%;">Item</th>
        <th style="width:41%;">Description</th>
        <th style="width:10%;" class="text-center">Quantity</th>
        <th style="width:10%;" class="text-center">Unit Price (&#163;)</th>
        <th style="width:10%;" class="text-center">Total Price (&#163;)</th>
        <th style="width:4%;"></th>
      </tr>
    </thead>
    <tbody id="addrow">
      <tr class="rows">
        <td style="border-top: none;">
          <input class="form-control" type="text" name="name" required>
        </td>
        <td style="border-top: none;">
          <textarea class="form-control" rows="1" name="description"></textarea>
        </td>
        <td style="border-top: none;">
          <input class="text-center form-control quantity" type="text" value="" name="quantity">
        </td>
        <td style="border-top: none;">
          <input class="text-center form-control unit-price" type="text" value="" name="unit_price">
        </td>
        <td style="border-top: none;">
          <input class="form-control text-center total-price" type="text" value="0.00" readonly>
        </td>
        <td style="border-top: none;" class="text-center"><a class="removeitem" href="#"><i class="fa fa-times"></i></a>
        </td>
      </tr>
      <tr class="rows">
        <td style="border-top: none;">
          <input class="form-control" type="text" name="name" required>
        </td>
        <td style="border-top: none;">
          <textarea class="form-control" rows="1" name="description"></textarea>
        </td>
        <td style="border-top: none;">
          <input class="text-center form-control quantity" type="text" value="" name="quantity">
        </td>
        <td style="border-top: none;">
          <input class="text-center form-control unit-price" type="text" value="" name="unit_price">
        </td>
        <td style="border-top: none;">
          <input class="form-control text-center total-price" type="text" value="0.00" readonly>
        </td>
        <td style="border-top: none;" class="text-center"><a class="removeitem" href="#"><i class="fa fa-times"></i></a>
        </td>
      </tr>
      <tr class="rows">
        <td style="border-top: none;">
          <input class="form-control" type="text" name="name" required>
        </td>
        <td style="border-top: none;">
          <textarea class="form-control" rows="1" name="description"></textarea>
        </td>
        <td style="border-top: none;">
          <input class="text-center form-control quantity" type="text" value="" name="quantity">
        </td>
        <td style="border-top: none;">
          <input class="text-center form-control unit-price" type="text" value="" name="unit_price">
        </td>
        <td style="border-top: none;">
          <input class="form-control text-center total-price" type="text" value="0.00" readonly>
        </td>
        <td style="border-top: none;" class="text-center"><a class="removeitem" href="#"><i class="fa fa-times"></i></a>
        </td>
      </tr>
    </tbody>
  </table>
  <table class="table invoice-table text-right">
    <tbody class="totals">
      <tr>
        <td style="border-top: none;">Sub Total:</td>
        <td style="border-top: none;"><strong class="subtotal">&#163;0.00</strong>
        </td>
      </tr>
      <tr>
        <td style="border-top: none;">Discount:</td>
        <td style="width:20%; border-top: none;">
          <div class="fm-group input-group" style="margin-bottom:0px">
            <span class="input-group-addon">%</span>
            <input type="number" class="form-control text-right discount" value="0">
          </div>
        </td>
      </tr>
      <tr>
        <td style="border-top: none;">VAT:</td>
        <td style="border-top: none;"><strong>&#163;0</strong>
        </td>
      </tr>
      <tr>
        <td style="border-top: none;">Amount Due:</td>
        <td style="border-top: none;"><strong class="total-price">&#163;0</strong>
        </td>
      </tr>
    </tbody>
  </table>
</div>

为了使计算正常工作，当您删除一行时，请将计算逻辑封装在函数calculate（）中，并在删除行时调用它。

关于NaN，您只需要确保当"数量"answers"单价"的文本框为空时，变量"数量"与"单价"应默认为0。

$(function() {
  $(".calculate-rows").keyup(function(event) {
    calculate();
  });
});
function calculate() {
    var total = 0;
    $(".calculate-rows").each(function() {
      var gtotal = 0;
      $(this).find(".rows").each(function() {
        var qty = parseFloat($(this).find(".quantity").val());
        var rate = parseFloat($(this).find(".unit-price").val());
          if (isNaN(qty) ) qty = 0;             
          if (isNaN(rate) ) rate = 0;
        var subtotal = qty * rate;
        $(this).find(".total-price").val(subtotal.toFixed(2));
        if (!isNaN(subtotal))
          gtotal += subtotal;
        $(".subtotal").html("&#163;" + gtotal.toFixed(2));
        var discount = $('.discount').val();
        var discount = ((gtotal / 100) * discount);
        var total = (gtotal - discount).toFixed(2);
        if (!isNaN(total))
          $(".total-price").html("&#163;" + total);
      });
    });
}
var wrapper = $('#addrow');
var newitem = $('.newitem');
var removeitem = $('.removeitem');
$(newitem).click(function(e) {
  e.preventDefault();
  $newrow = $('<tr class="rows"><td style="border-top: none;"><input class="form-control" type="text" name="name" required></td><td style="border-top: none;"><textarea class="form-control" rows="1" name="description"></textarea></td><td style="border-top: none;"><input class="text-center form-control quantity" type="text" value="" name="quantity"></td><td style="border-top: none;"><input class="text-center form-control unit-price" type="text" value="" name="unit_price"></td><td style="border-top: none;"><input class="form-control text-center total-price" type="text" value="0.00" readonly></td><td style="border-top: none;" class="text-center"><a class="removeitem" href="#"><i class="fa fa-times"></i></a></td></tr>');
  $(wrapper).append($newrow);
  $newrow.on("click", "a", function(e) {
    e.preventDefault();
    $(this).parent().parent().remove();
      calculate();
  });
});
$(removeitem).click(function(e) {
  e.preventDefault();
  $(this).parent().parent().remove();
    calculate();
});

听起来像是在使用一个过时的jQuery对象从。。。检查更新数据源。。

通过调用$(".calculate-rows").keyup();

添加/删除行后，尝试重新启动keyup事件