jQuery Total和小计给出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

问题是，您已经在行var price = $('.price').html();中获得了价格内容，那么为什么要在此行$(price[i]).val()中获得价值？

没有要获取的value键，并且输入字段仅具有value属性。 解决方案是

var price = $('.price');

AND

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

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

Answer 2

在CalculateSubTotals内，price是字符串：

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

如此

$(price[i]).val()

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

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

此外，.price是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>