javascript - 如何用jquery计算表中的一些数字？

Question

需要表格帮助 用 jquery 计算一些数字

第一个表格行的计算正确完成，tfoot for equal 工作正常

月数量*单价=月合计 年合计=月合计*12

每个 td 的表脚在 td 列上方添加示例：

$("html").bind('input keydown keyup mousedown mouseup', function() {
  $('table tr td:nth-child(5) input,table tr td:nth-child(6) input').prop('readonly', true);

  var qntMonthly = Number($('table tr td:nth-child(3) input').val());
  var unitprice = Number($('table tr td:nth-child(4) input').val());
  var totalmonthly = qntMonthly * unitprice;
  var totalannualy = totalmonthly * 12;


  document.querySelector('table tr td:nth-child(5) input').value = qntMonthly * unitprice;
  document.querySelector('table tr td:nth-child(6) input').value = totalannualy;


  var alltotalmonthly = 0;
  $("table tbody tr td:nth-child(3) input").each(function() {
    alltotalmonthly += +$(this).val();
  });
  var allunits = 0;
  $("table tbody tr td:nth-child(4) input").each(function() {
    allunits += +$(this).val();
  });
  var totalallmonthly = 0;
  $("table tbody tr td:nth-child(5) input").each(function() {
    totalallmonthly += +$(this).val();
  });
  var totalallannualy = 0;
  $("table tbody tr td:nth-child(6) input").each(function() {
    totalallannualy += +$(this).val();
  });

  /*document.querySelector('table tfoot tr td:nth-child(3)').html(alltotalmonthly);*/
  document.getElementById("allqutymonthly").innerHTML = alltotalmonthly
  document.getElementById("allunits").innerHTML = allunits
  document.getElementById("totalallmonthly").innerHTML = totalallmonthly
  document.getElementById("totalallannualy").innerHTML = totalallannualy

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tableA table table-striped table-bordered">
  <thead>
    <tr>
      <th>no.</th>
      <th>title</th>
      <th>Monthly Quantity</th>
      <th>unit Price</th>
      <th>Total Monthly</th>
      <th>Total Annually</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="text-center">1</td>
      <td><input type="text" value="Tea" class="form-control"></td>
      <td><input type="number" min="0" value="2" class="form-control"></td>
      <td><input type="number" min="0" value="2" class="form-control"></td>
      <td><input type="number" min="0" value="" class="form-control">

      </td>
      <td><input type="number" min="0" value="" class="form-control"></td>
      <td class="text-center">

      </td>
    </tr>
    <tr>
      <td class="text-center">2</td>
      <td><input type="text" value="coffee" class="form-control"></td>
      <td><input type="number" min="0" value="10" class="form-control"></td>
      <td><input type="number" min="0" value="3" class="form-control"></td>
      <td><input type="number" min="0" value="5" class="form-control"></td>
      <td><input type="number" min="0" value="2" class="form-control"></td>
    </tr>



  </tbody>
  <tfoot>
    <tr>
      <td colspan="2" class="text-center">Total</td>
      <td>
        <div id="allqutymonthly" class="totalSum">00000</div>
      </td>
      <td>
        <div id="allunits" class="totalSum">00000</div>
      </td>
      <td>
        <div id="totalallmonthly" class="totalSum">00000</div>
      </td>
      <td>
        <div id="totalallannualy" class="totalSum">00000</div>
      </td>
    </tr>
  </tfoot>
</table>

1-我想将它应用到所有表格行

2-我需要总数打开页面时自动出现，总数直接改变。

标签： javascriptjquery