Question

我正在尝试计算一些值，但在输出中，税区给我一个'Nan'值。这是我的HTML和jQuery代码。如何计算关键字函数的税？

HTML

<form>
<table id="my-table">
    <tr class="targetfields">
       <td><input type="text" class="common quantity" name="1" id="quant" value="40"></td>
       <td><input type="text" class="common price" name="2" id="units" value="125"></td>
       <td><input type="text" class="total" name="3" id="total" readonly></td>
    </tr>
    <tr class="targetfields">
       <td><input type="text" class="common quantity" name="1" id="quant" value="10"></td>
       <td><input type="text" class="common price" name="2" id="units" value="20"></td>
       <td><input type="text" class="total" name="3" id="total" readonly></td>
    </tr>
    <tr>
       <td colspan="2"><label class="form-control" style="box-shadow:none;border:0px solid black;">Subtotal</label></td>
       <td><input name="subtotal" readonly id="subtotal" class="sub" type="text" /></td>
    </tr>
    <tr class="targetfields">
       <td colspan="2"><b>Sales Tax<input name="tax" class='tax' value="20" class="form-control" style="box-shadow:none;border:0px solid black;" type="text" /></b></td>
       <td><input name="salestax" id="tax" class="taxation" readonly type="text" /></td>
    </tr>
    <tr>
       <td colspan="4"><label class="form-control" style="box-shadow:none;border:0px solid black;">Total</label></td>
       <td><input readonly name= "lasttotal" class="form-control" style="box-shadow:none;border:0px solid black;" type="text" /></td>
    </tr>
</table>
</form>

的jQuery

<script>
$(function() {
    $("#my-table").onkeyup(function(event) {
        var sub = 0;
        $("#my-table .targetfields").each(function() {

            var qty = parseInt($(this).find(".quantity").val());
            var rate = parseInt($(this).find(".price").val());
            var tax_rate = parseInt($(this).find(".tax").val());

            var subtotal = qty * rate;
            $(this).find(".total").val(subtotal);

            if(!isNaN(subtotal))
            sub+=subtotal;
            var tax_amount = sub * tax_rate / 100;
            $(this).find(".taxation").val(tax_amount);
        });
        $(".sub").val(sub);
     });
 })
</script>

此代码的输出是

Answer 1

您使用了错误的事件名称onkeyup。你需要使用keyup

$("#my-table").keyup(function(event) {
     //.......
 });

您可以看到Working fiddle它工作正常。

Answer 2

$(document).ready(function () {
            $("#my-table").keyup(function (event) {
                calculateTotals();
            });

            calculateTotals();
        });
        var tax_amount = 0;
        function calculateTotals() {
            var sub = 0;
            $("#my-table .targetfields").each(function () {

                var qty = parseInt($(this).find(".quantity").val());
                var rate = parseInt($(this).find(".price").val());
                var tax_rate = parseInt($(this).find(".tax").val());
                if (isNaN(qty))
                    qty = 0;
                if (isNaN(rate))
                    rate = 0;
                if (isNaN(tax_rate))
                    tax_rate = 0;

                var subtotal = qty * rate;
                $(this).find(".total").val(subtotal);

                if (!isNaN(subtotal))
                    sub += subtotal;
                tax_amount = sub * tax_rate / 100;
                $(this).find(".taxation").val(tax_amount);
            });
            $(".sub").val(sub);
$(".grandtotal").val(sub+tax_amount);
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form>
<table id="my-table">
    <tr class="targetfields">
       <td><input type="text" class="common quantity" name="1" id="quant" value="40"></td>
       <td><input type="text" class="common price" name="2" id="units" value="125"></td>
       <td><input type="text" class="total" name="3" id="total" readonly></td>
    </tr>
    <tr class="targetfields">
       <td><input type="text" class="common quantity" name="1" id="quant" value="10"></td>
       <td><input type="text" class="common price" name="2" id="units" value="20"></td>
       <td><input type="text" class="total" name="3" id="total" readonly></td>
    </tr>
    <tr>
       <td colspan="2"><label class="form-control" style="box-shadow:none;border:0px solid black;">Subtotal</label></td>
       <td><input name="subtotal" readonly id="subtotal" class="sub" type="text" /></td>
    </tr>
    <tr class="targetfields">
       <td colspan="2"><b>Sales Tax<input name="tax" class='tax' value="20" class="form-control" style="box-shadow:none;border:0px solid black;" type="text" /></b></td>
       <td><input name="salestax" id="tax" class="taxation" readonly type="text" /></td>
    </tr>
    <tr>
       <td colspan="2"><b>Sales Tax<input name="tax" class='tax' value="20" class="form-control" style="box-shadow:none;border:0px solid black;" type="text" /></b></td>
       <td><input name="salestax" id="tax" class="grandtotal" readonly type="text" /></td>
    </tr>
</table>
</form>

Answer 3

请查看以下代码。

 $("#my-table").onkeyup(function(event) {
var sub = 0;
    $("#my-table .targetfields").each(function () {

        var qty = parseInt($(this).find(".quantity").val());
        var rate = parseInt($(this).find(".price").val());
        var tax_rate = parseInt($('.targetfields').find(".tax").val());

        var subtotal = qty * rate;
        $(this).find(".total").val(subtotal);

        if (!isNaN(subtotal))
            sub += subtotal;
        var tax_amount = sub * tax_rate / 100;
        $(this).find(".taxation").val(tax_amount);
    });
    $(".sub").val(sub); });

这对你有用。如果您有任何疑问，请告诉我。

谢谢。

如何在jquery中计算keyup函数的税？

3 个答案: