根据jQuery中的数学函数，总成本无法正确更新

Question

我正在尝试使用jQuery进行基本数学运算以及动态添加表格的额外行。我目前的代码如下：

$(document).ready(
  function() {

    $(".sub").focusout( //get it using class
      function() {
        var parent = $(this).closest('.row_to_clone');
        parent.find(".net").html('');
        var gross = parent.find('.gross').val();
        var tare = parent.find('.tare').val();
        var net = (gross - tare);
        net = Math.round(net * 1000) / 1000;
        parent.find(".net").html(net);
      });

    $(".sub1").focusout(function() {
      $(".total").html('');
      var net = parseFloat($(".net").text());
      var ppp = parseFloat($(".ppp").val());
      var total = net * ppp;
      $(".total").html(Math.round(total * 1000) / 1000);
    });


    $("#add").click(
      function() {
        var newRow = $('#lineItemTable tbody>tr:last')
          .clone(true).insertAfter(
            '#lineItemTable tbody>tr:last');
        newRow.find('input').val('');
        newRow.find('p').text('');
        return false;
      });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="add">add Line</a>
<table id="lineItemTable">
  <tr>
    <th>Gross</th>
    <th>Tare</th>
    <th>Net</th>
    <th>Price Per Pound</th>
    <th>Total cost</th>
  </tr>
  <tr class="row_to_clone">
    <td>
      <input type='number' step="any" name='gross' class='gross sub' />
    </td>
    <td>
      <input type='number' step="any" name='tare' class='tare sub' />
    </td>
    <td>
      <p class='net'></p>
    </td>
    <td>
      <input type="number" step="any" name="ppp" class='ppp sub1' />
    </td>
    <td id="calculated">
      <p class='total'></p>
    </td>
  </tr>
</table>

此捕获显示我目前遇到的问题：

如您所见，当我添加多行时，total cost未正确计算。 total cost的计算方法如下：Net = (Gross - Tare)和Total Cost = Net * price per pound

只有在我有一行数据时才会返回正确的结果。我错过了什么？

Answer 1

您需要使用相对于当前行的选择器。您可以在.sub代码中正确执行此操作，但不能.sub1。

＆＃13;

＆＃13;

$(document).ready(
  function() {

    $(".sub").focusout( //get it using class
      function() {
        var parent = $(this).closest('.row_to_clone');
        parent.find(".net").html('');
        var gross = parent.find('.gross').val();
        var tare = parent.find('.tare').val();
        var net = (gross - tare);
        net = Math.round(net * 1000) / 1000;
        parent.find(".net").html(net);
      });

    $(".sub1").focusout(function() {
      var parent = $(this).closest('.row_to_clone');
      parent.find(".total").html('');
      var net = parseFloat(parent.find(".net").text());
      var ppp = parseFloat(parent.find(".ppp").val());
      var total = net * ppp;
      parent.find(".total").html(Math.round(total * 1000) / 1000);
    });


    $("#add").click(
      function() {
        var newRow = $('#lineItemTable tbody>tr:last')
          .clone(true).insertAfter(
            '#lineItemTable tbody>tr:last');
        newRow.find('input').val('');
        newRow.find('p').text('');
        return false;
      });
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="add">add Line</a>
<table id="lineItemTable">
  <tr>
    <th>Gross</th>
    <th>Tare</th>
    <th>Net</th>
    <th>Price Per Pound</th>
    <th>Total cost</th>
  </tr>
  <tr class="row_to_clone">
    <td>
      <input type='number' step="any" name='gross' class='gross sub' />
    </td>
    <td>
      <input type='number' step="any" name='tare' class='tare sub' />
    </td>
    <td>
      <p class='net'></p>
    </td>
    <td>
      <input type="number" step="any" name="ppp" class='ppp sub1' />
    </td>
    <td id="calculated">
      <p class='total'></p>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;