如何使用 jQuery 在发票中实现折扣值

Question

我正在尝试在我的表单中实现折扣值。我在 jQuery 代码中尝试过这个$('tbody').delegate('.quantity,.price,.gst,.dsc', 'keyup', function() {  var tr = $(this).parent().parent();  var quantity = tr.find('.quantity').val();  var price = tr.find('.price').val();  var gst = tr.find('.gst').val();  var dcs = tr.find('.dcs').val();  var totalamountgst = (quantity * price * gst) / 100;  var totalamountdcs = (quantity * price * dcs) / 100;  var totalamounts = (quantity * price + totalamountgst);  var totalamount = (totalamounts - totalamountdcs);  tr.find('.totalamount').val(totalamount);  total();});function total() {  var total = 0;  $('.totalamount').each(function(i, e) {    var totalamount = $(this).val() - 0;    total += totalamount;  });  $('.total').val(total + ".00");} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table>  <tbody>    <tr>      <td> <input style="text-align:center;" type="text" class="text-danger  input-lg form-control quantity" name="qty[]" id="validationServer01" placeholder="QTY" value="" required pattern="[1-2-3-4-3-5-6-7-8-9-10-12]+" numbers="onlynumbers" autocomplete="off"></td>      <td> <input style="text-align:center;" type="text" class="text-danger  input-lg form-control gst " name="gst_amount[]" id="validationServer01" placeholder="GST" value="" required pattern="[1-2-3-4-3-5-6-7-8-9-10-12]+" numbers="onlynumbers" autocomplete="off"></td>      <td> <input style="text-align:center;" type="text" class="text-danger  input-lg form-control dcs " name="dcs_amount[]" id="validationServer01" placeholder="DCS" value="" required pattern="[1-2-3-4-3-5-6-7-8-9-10-12]+" numbers="onlynumbers" autocomplete="off"></td>      <td> <input style="text-align:center;" type="number" class="text-danger  input-lg form-control price" name="purchase_rate[]" id="validationServer01" placeholder="RATE" value="" required pattern="" numbers="" autocomplete="off"></td>    </tr>  </tbody></table>

Answer 1

你有拼写错误并且错过了总数。

当 ppl 输入非数字或将它们全部设置为 type=number 时，您确实还应该测试空和 isNaN

$('tbody').on('input', '.quantity,.price,.gst,.dsc', function() {

  const $tr = $(this).closest("tr"); // parent row

  const quantity = $tr.find('.quantity').val() || 0; // value of input fields

  const price = $tr.find('.price').val() || 0;

  const gst = $tr.find('.gst').val() || 0;

  

  const $dcsField = $tr.find('.dcs'); // the field is cached so we can reuse

  const dcs = $dcsField.val(); // here is the value

  const totalamountgst = (quantity * price * gst) / 100;

  const totalamountdcs = (quantity * price * dcs) / 100;

  const totalamounts = (quantity * price + totalamountgst);

  const totalamount = (totalamounts - totalamountdcs);

  

  $dcsField.data("dcsamt",totalamountdcs || 0); // save the discounted value in a data attribute to be summed

  $tr.find('.totalamount').val(totalamount.toFixed(2));

  total();

});

function total() {

  let total = 0,

    totalQty = 0,

    totalDcs = 0;

  $('.totalamount').each(function(i, e) {

    const totalamount = $(this).val() - 0;

    total += totalamount;

    const q = $(this).closest("tr").find(".quantity").val() || 0;

    const d = $(this).closest("tr").find(".dcs").data("dcsamt") || 0;

    totalQty += q - 0;

    totalDcs += d - 0; // take the actual discount from the attribute

  });

  $('#total').val(total.toFixed(2));

  $('#totalitems').val(totalQty.toFixed(2));

  $('#totaldcs').val(totalDcs.toFixed(2));

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>

  <tbody>

    <tr>

      <td> <input style="text-align:center;" type="text" class="text-danger  input-lg form-control quantity" name="qty[]" id="validationServer01" placeholder="QTY" value="" required pattern="[1-2-3-4-3-5-6-7-8-9-10-12]+" numbers="onlynumbers" autocomplete="off"></td>

      <td> <input style="text-align:center;" type="text" class="text-danger  input-lg form-control gst " name="gst_amount[]" id="validationServer01" placeholder="GST" value="" required pattern="[1-2-3-4-3-5-6-7-8-9-10-12]+" numbers="onlynumbers" autocomplete="off"></td>

      <td> <input style="text-align:center;" type="text" class="text-danger  input-lg form-control dcs " name="dcs_amount[]" id="validationServer01" placeholder="DCS" value="" required pattern="[1-2-3-4-3-5-6-7-8-9-10-12]+" numbers="onlynumbers" autocomplete="off"></td>

      <td> <input style="text-align:center;" type="number" class="text-danger  input-lg form-control price" name="purchase_rate[]" id="validationServer01" placeholder="RATE" value="" required pattern="" numbers="" autocomplete="off"></td>

      <td> <input style="text-align:center;" type="text" class="text-danger  input-lg form-control totalamount" name="" id="validationServer01" placeholder="AMOUNT" value="" required pattern="[1-2-3-4-3-5-6-7-8-9-10-12]+" numbers="onlynumbers" disabled></td>

    </tr>

    <tr>

      <td> <input style="text-align:center;" type="text" class="text-danger  input-lg form-control quantity" name="qty[]" id="validationServer01" placeholder="QTY" value="" required pattern="[1-2-3-4-3-5-6-7-8-9-10-12]+" numbers="onlynumbers" autocomplete="off"></td>

      <td> <input style="text-align:center;" type="text" class="text-danger  input-lg form-control gst " name="gst_amount[]" id="validationServer01" placeholder="GST" value="" required pattern="[1-2-3-4-3-5-6-7-8-9-10-12]+" numbers="onlynumbers" autocomplete="off"></td>

      <td> <input style="text-align:center;" type="text" class="text-danger  input-lg form-control dcs " name="dcs_amount[]" id="validationServer01" placeholder="DCS" value="" required pattern="[1-2-3-4-3-5-6-7-8-9-10-12]+" numbers="onlynumbers" autocomplete="off"></td>

      <td> <input style="text-align:center;" type="number" class="text-danger  input-lg form-control price" name="purchase_rate[]" id="validationServer01" placeholder="RATE" value="" required pattern="" numbers="" autocomplete="off"></td>

      <td> <input style="text-align:center;" type="text" class="text-danger  input-lg form-control totalamount" name="" id="validationServer01" placeholder="AMOUNT" value="" required pattern="[1-2-3-4-3-5-6-7-8-9-10-12]+" numbers="onlynumbers" disabled></td>

    </tr>

    <tr>

      <td> <input style="text-align:center;" type="text" class="text-danger  input-lg form-control quantity" name="qty[]" id="validationServer01" placeholder="QTY" value="" required pattern="[1-2-3-4-3-5-6-7-8-9-10-12]+" numbers="onlynumbers" autocomplete="off"></td>

      <td> <input style="text-align:center;" type="text" class="text-danger  input-lg form-control gst " name="gst_amount[]" id="validationServer01" placeholder="GST" value="" required pattern="[1-2-3-4-3-5-6-7-8-9-10-12]+" numbers="onlynumbers" autocomplete="off"></td>

      <td> <input style="text-align:center;" type="text" class="text-danger  input-lg form-control dcs " name="dcs_amount[]" id="validationServer01" placeholder="DCS" value="" required pattern="[1-2-3-4-3-5-6-7-8-9-10-12]+" numbers="onlynumbers" autocomplete="off"></td>

      <td> <input style="text-align:center;" type="number" class="text-danger  input-lg form-control price" name="purchase_rate[]" id="validationServer01" placeholder="RATE" value="" required pattern="" numbers="" autocomplete="off"></td>

      <td> <input style="text-align:center;" type="text" class="text-danger  input-lg form-control totalamount" name="" id="validationServer01" placeholder="AMOUNT" value="" required pattern="[1-2-3-4-3-5-6-7-8-9-10-12]+" numbers="onlynumbers" disabled></td>

    </tr>

    <tr>

      <td> <input type="text" class="text-danger input-lg form-control" id="totalitems" name="" placeholder="TOTAL ITEMS" value=""></td>

      <td></td>

      <td> <input type="text" class="input-lg form-control" id="totaldcs" name="" placeholder="TOTAL DCS" value=""></td>

      <td></td>

      <td><input type="text" readonly id="total"></td>

    </tr>

  </tbody>

</table>