javascript - jQuery Total 和 subtotal 给出 NaN

Question

我正在使用 jQuery 制作总表和小计表，但我遇到了很多问题。第一个问题，当我重新加载此页面时，总计和小计显示 NaN，即使输入的值已默认输入。

第二个问题，第二行的数据等等，仍然只取第一行的价格。

我想要的:

1. 我希望自动计算总计和小计开始并且可以在将来更改。
2. 我希望每个总计计算每一行的价格

这是我的代码:

$(document).ready(function () {
    $counter = 1;

    $('table#invoiceitems').on('keyup', '.quantity , .price',function () {
      UpdateTotals(this);
    });

    $counter = 1;
    CalculateSubTotals();
    CalculateTotal();
  });


  function UpdateTotals(elem) {
    // This will give the tr of the Element Which was changed
    var $container = $(elem).parent().parent();
    var quantity = $container.find('.quantity').val();
    var price = $('.price').html();
    var subtotal = parseInt(quantity) * parseFloat(price);
    $container.find('.subtotal').text(subtotal.toFixed(2));
    CalculateTotal();
  }

  function CalculateSubTotals() {
    // Calculate the Subtotals when page loads for the
    // first time
    var lineTotals = $('.subtotal');
    var quantity = $('.quantity');
    var price = $('.price').html();
    $.each(lineTotals, function (i) {
      var tot = parseInt($(quantity[i]).val()) * parseFloat($(price[i]).val());
      $(lineTotals[i]).text(tot.toFixed(2));
    });
  }

  function CalculateTotal() {
    // This will Itearate thru the subtotals and
    // claculate the grandTotal and Quantity here
    var lineTotals = $('.subtotal');
    var quantityTotal = $('.quantity');
    var grandTotal = 0.0;
    var totalQuantity = 0;
    $.each(lineTotals, function (i) {
      grandTotal += parseFloat($(lineTotals[i]).text());
      totalQuantity += parseInt($(quantityTotal[i]).val())
    });
    $('.totalquantity').text(totalQuantity);
    $('.grandtotal').text(parseFloat(grandTotal).toFixed(2));
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" id="invoiceitems">
  <thead>
  <tr>
    <td><strong>Paper</strong>
    </td>
    <td><strong>Price</strong>
    </td>
    <td><strong>Quantity</strong>
    </td>
    <td><strong>Total</strong>
    </td>
  </tr>
  </thead>
  <tfoot>
  <tr>
    <td colspan="3"><strong>SUBTOTAL</strong>
    </td>
    <td>
      <label class="grandtotal"></label>
    </td>
  </tr>
  </tfoot>
  <tbody>
  <tr>
    <td>
      Glossy Paper A5
    </td>
    <td>
      <span class="price">15000</span>
    </td>
    <td>
      <input type="text" name="item[1][quantity]" class="quantity" value="1"/>
    </td>
    <td>
      <label class="subtotal"></label>
    </td>
  </tr>
  <tr>
    <td>
      Glossy Paper A5
    </td>
    <td>
      <span class="price">20000</span>
    </td>
    <td>
      <input type="text" name="item[1][quantity]" class="quantity" value="1"/>
    </td>
    <td>
      <label class="subtotal"></label>
    </td>
  </tr>
  </tbody>
</table>

Answer 1

在 CalculateSubTotals 中，price 是一个字符串:

var price = $('.price').html();

所以

$(price[i]).val()

没有意义 - 它已经是一个普通字符串，不能有意义地包装在 jQuery 中。

如果您想要访问单个 .price 元素，则只需使用 $('.price')。

此外，.price 是 span，而不是输入 - 要在 span 中获取文本，您应该使用 .text()。仅使用 .val() 从类似输入的元素中获取文本，例如从 input 和 textarea:

var price = $('.price');
// ...
var tot = parseInt($(quantity[i]).val()) * parseFloat($(price[i]).text());
//                                                               ^^^^^^^

需要对您的 UpdateTotals 函数进行相同的修复。

$(document).ready(function() {
  $counter = 1;

  $('table#invoiceitems').on('keyup', '.quantity , .price', function() {
    UpdateTotals(this);
  });

  $counter = 1;
  CalculateSubTotals();
  CalculateTotal();
});


function UpdateTotals(elem) {
  // This will give the tr of the Element Which was changed
  var $container = $(elem).parent().parent();
  var quantity = $container.find('.quantity').val();
  var price = $container.find('.price').text();
  var subtotal = parseInt(quantity) * parseFloat(price);
  $container.find('.subtotal').text(subtotal.toFixed(2));
  CalculateTotal();
}

function CalculateSubTotals() {
  // Calculate the Subtotals when page loads for the
  // first time
  var lineTotals = $('.subtotal');
  var quantity = $('.quantity');
  var price = $('.price');
  $.each(lineTotals, function(i) {
    var tot = parseInt($(quantity[i]).val()) * parseFloat($(price[i]).text());
    $(lineTotals[i]).text(tot.toFixed(2));
  });
}

function CalculateTotal() {
  // This will Itearate thru the subtotals and
  // claculate the grandTotal and Quantity here
  var lineTotals = $('.subtotal');
  var quantityTotal = $('.quantity');
  var grandTotal = 0.0;
  var totalQuantity = 0;
  $.each(lineTotals, function(i) {
    grandTotal += parseFloat($(lineTotals[i]).text());
    totalQuantity += parseInt($(quantityTotal[i]).val())
  });
  $('.totalquantity').text(totalQuantity);
  $('.grandtotal').text(parseFloat(grandTotal).toFixed(2));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" id="invoiceitems">
  <thead>
    <tr>
      <td><strong>Paper</strong>
      </td>
      <td><strong>Price</strong>
      </td>
      <td><strong>Quantity</strong>
      </td>
      <td><strong>Total</strong>
      </td>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="3"><strong>SUBTOTAL</strong>
      </td>
      <td>
        <label class="grandtotal"></label>
      </td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>
        Glossy Paper A5
      </td>
      <td>
        <span class="price">15000</span>
      </td>
      <td>
        <input type="text" name="item[1][quantity]" class="quantity" value="1" />
      </td>
      <td>
        <label class="subtotal"></label>
      </td>
    </tr>
    <tr>
      <td>
        Glossy Paper A5
      </td>
      <td>
        <span class="price">20000</span>
      </td>
      <td>
        <input type="text" name="item[1][quantity]" class="quantity" value="1" />
      </td>
      <td>
        <label class="subtotal"></label>
      </td>
    </tr>
  </tbody>
</table>