如何使用 jQuery 在发票中实现折扣值
我正在尝试在我的表单中实现折扣值。
我在 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>
ABOUTYOU1回答
-
一只斗牛犬
你有拼写错误并且错过了总数。当 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>
随时随地看视频慕课网APP
PHP