JavaScript 删除项目时的计算

Question

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

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

1) 我该如何解决这个问题？
2) 如何让 NaN 不出现在 "Total Price" 列中 - FIXED
3) 我不是 JavaScript 方面的专家，因此对于改进现有代码的任何帮助也将不胜感激！

编辑：在代码片段中包含用于删除行的 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>

Answer 1

为了使您的计算有效，当您删除一行时，将您的计算逻辑包装在一个函数 calculate() 中，并在您删除一行时调用它。

关于 NaN，您只需确保当 Quantity 和 Unit Rate 的文本框为空时，变量 qty 和 rate 应默认为 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();
});

Answer 2

听起来您正在使用过时的 jQuery 对象来获取您的值...检查更新您的数据源..

Answer 3

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

在 add/delete 行后重新触发 keyup 事件

JavaScript 删除项目时的计算

JavaScript calculation when items are deleted

html

javascript

jquery

calculated-field

jquery-calculation