jqueryのkeyup関数の税金を計算するには？

Question

私はいくつかの値を計算しようとしていますが、出力では税のフィールドは私に 'ナン'値を与えます。ここに私の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> 

このコードの出力は、あなたが間違ったイベント名onkeyupを使用している

Answer 1

です。あなたはそれがうまく働いてWorking fiddleを見ることができますkeyup

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

を使用する必要があります。

Answer 2

下記のコードをご確認ください。

$("#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); }); 

これはうまくいくでしょう。ご質問がある場合はお知らせください。

ありがとうございました。

Answer 3

$(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>