Question

当我从表中删除一行时遇到问题。我有一个计算总价，小计等的函数，工作正常。

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

1）我该如何解决这个问题？ 2）如何让NaN不出现在＆＃34;总价格＆＃34;专栏 - 固定
3）我不是JavaScript的专家，因此在改进现有代码时也会非常感谢任何帮助！

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

＆＃13;

$(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();
});

＆＃13;

<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>

＆＃13;

Answer 1

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

关于NaN，您只需确保当数量和单位费率的文本框为空时，变量数量和速率应默认为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();

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

删除项目时的JavaScript计算

3 个答案: