2017-02-22 3 views
0

Ich habe eine Tabelle, wo ich Gesamtbetrag ohne Steuern eines Artikels (Item Price * Quantity - Discount%) berechnen.Jquery Attribute Selector funktioniert nicht am ersten Änderungsereignis

Auf diesen Gesamtbetrag ohne Steuern habe ich die Option, entweder Mehrwertsteuer oder SAT oder beides hinzuzufügen. Bei der Überprüfung des Mehrwertsteuerbetrags sollte der Gesamtbetrag in einem Textfeld angezeigt werden (Total Amount Without Tax + VAT/SAT). Diese Funktionalität ist in der Funktion calculateTotalBill() implementiert. Das Problem ist, dass es NaN am allerersten Änderungsereignis von Checkboxes (VAT/SAT) anzeigt. Bei nachfolgenden Änderungsereignissen funktioniert die Funktion einwandfrei.

unten ist das Snippet

function getPrice(element) { 
 
     var itemPrice = $(element).closest('tr').find('td:eq(1) input'); 
 
     $itemId = $(element).val(); 
 
     itemPrice.val(5); 
 
     calculateAmount(element); 
 
    } 
 

 
    function calculateAmount(element) { 
 
     var itemPrice = $(element).closest('tr').find('td:eq(1) input').val() == "" ? 0 : $(element).closest('tr').find('td:eq(1) input').val(); 
 
     var quantity = $(element).closest('tr').find('td:eq(2) input').val() == "" ? 0 : $(element).closest('tr').find('td:eq(2) input').val(); 
 
     var discount = $(element).closest('tr').find('td:eq(3) input').val() == "" ? 0 : $(element).closest('tr').find('td:eq(3) input').val(); 
 
     var amount = $(element).closest('tr').find('td:eq(4) input'); 
 
     var calcAmount = parseFloat(itemPrice) * parseInt(quantity) - (parseFloat(itemPrice) * parseInt(quantity) * parseFloat(discount)/100); 
 
     amount.val(calcAmount); 
 
     calculateTotal(); 
 
    } 
 

 
    function calculateTotal() { 
 
     var sum = 0; 
 
     $('#mptblBill tbody tr').each(function() { 
 
      sum = parseFloat(sum) + parseFloat($(this).find('td:eq(4) input').val()); 
 
     }); 
 
     $('#txtTotalWdoutTax').val(sum); 
 
    } 
 

 
    function calculateTax(element) { 
 
     var amount = $('#txtTotalWdoutTax').val(); 
 
     var taxAmount = amount * parseFloat($(element).val())/100; 
 
     if ($(element).is(":checked")) { 
 
      $(element).closest('td').next('td').find('input').val(taxAmount); 
 
     } 
 
     else { 
 
      $(element).closest('td').next('td').find('input').val(0); 
 
     } 
 
     calculateTotalBill(); 
 
    } 
 

 
    function calculateTotalBill() { 
 
     var amount = $('#txtTotalWdoutTax').val(); 
 
     var taxTotal = 0; 
 
     $('#calcTable tbody tr').each(function() { 
 
      var a = $(this).find('td:eq(1) input[name^="txt_"]').length; 
 
      var b = $(this).find('td:eq(1) input[name^="txt_"]').val(); 
 
      if (a > 0) { 
 
       taxTotal = parseFloat(taxTotal) + parseFloat(b); 
 
      } 
 
     }); 
 
     $('#txtTotal').val(parseFloat(amount) + parseFloat(taxTotal)); 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table style="width: 95%;" id="mptblBill" class="no-footer dataTable" role="grid"> 
 
    
 
    <tbody> 
 
      
 
    <tr role="row" class=""> 
 
       <td> 
 
        <select onchange="getPrice(this);" id="ddlItemId_0"> 
 
          <option value="1">Crocin Medicine</option> 
 
          <option value="3">DCold Total</option> 
 
          <option value="4">Rice</option> 
 
        </select> 
 
       </td> 
 
       <td><input type="text" disabled="disabled" class="width100" value="" id="txtItemPrice_0"></td> 
 
       <td><input type="text" onchange="calculateAmount(this);" class="width100" value="" id="txtQuantity_0"></td> 
 
       <td><input type="text" onchange="calculateAmount(this);" class="width100" value="" id="txtDiscount_0"></td> 
 
       <td><input type="text" disabled="disabled" class="width100" value="" id="txtAmount_0"></td> 
 
       <td><input type="button" class="width100" value="+" id="btnAdd_0"></td> 
 
      </tr></tbody> 
 
<thead> 
 
     <tr role="row"><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 216px;">Item Name</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 188px;">Item Price</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 188px;">Quantity</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 188px;">Discount</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 188px;">Amount</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 109px;">Action</th></tr> 
 
    </thead> 
 
</table> 
 
<table id="calcTable" style="width:100%; margin-left:32%;"> 
 
    <tbody> 
 
     <tr> 
 
      <td colspan="6"> 
 
       <label class="pullRight">Total Amount Without Tax </label> 
 
      </td> 
 
      <td colspan="2"> 
 
       <input type="text" style="width:188px;" value="" disabled="disabled" id="txtTotalWdoutTax"> 
 
      </td> 
 
     </tr> 
 
      <tr> 
 
       <td colspan="6"> 
 
        <input type="checkbox" onchange="calculateTax(this);" value="12" style="display:inline" id="chkTax_1" class="pullRight"><label style="display:inline" class="pullRight"> VAT - 12 % </label> 
 
       </td> 
 
       <td colspan="2"> 
 
        <input type="text" style="width:188px;" value="" disabled="disabled" name="txt_1"> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td colspan="6"> 
 
        <input type="checkbox" onchange="calculateTax(this);" value="2" style="display:inline" id="chkTax_2" class="pullRight"><label style="display:inline" class="pullRight"> SAT - 2 % </label> 
 
       </td> 
 
       <td colspan="2"> 
 
        <input type="text" style="width:188px;" value="" disabled="disabled" name="txt_2"> 
 
       </td> 
 
      </tr> 
 
     <tr> 
 
      <td colspan="6"> 
 
       <label class="pullRight">Total Amount </label> 
 
      </td> 
 
      <td colspan="2"> 
 
       <input type="text" style="width:188px;" value="" disabled="disabled" id="txtTotal"> 
 
      </td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Was mache ich falsch? Jede Hilfe wird geschätzt.

+0

Ausfahrten Versuchen? parseFloat (Betrag) + parseFloat (taxTotal) –

+0

@ ÁlvaroTouzón Ich verstehe es nicht. "Betrag" ist der Gesamtbetrag ohne Steuern. 'taxTotal' ist die Steuer auf den Betrag. –

+0

einer der beiden Werte oder ist String oder ist nicht definiert –

Antwort

0

diese beiden Werte

function getPrice(element) { 
 
     var itemPrice = $(element).closest('tr').find('td:eq(1) input'); 
 
     $itemId = $(element).val(); 
 
     itemPrice.val(5); 
 
     calculateAmount(element); 
 
    } 
 

 
    function calculateAmount(element) { 
 
     var itemPrice = $(element).closest('tr').find('td:eq(1) input').val() == "" ? 0 : $(element).closest('tr').find('td:eq(1) input').val(); 
 
     var quantity = $(element).closest('tr').find('td:eq(2) input').val() == "" ? 0 : $(element).closest('tr').find('td:eq(2) input').val(); 
 
     var discount = $(element).closest('tr').find('td:eq(3) input').val() == "" ? 0 : $(element).closest('tr').find('td:eq(3) input').val(); 
 
     var amount = $(element).closest('tr').find('td:eq(4) input'); 
 
     var calcAmount = parseFloat(itemPrice) * parseInt(quantity) - (parseFloat(itemPrice) * parseInt(quantity) * parseFloat(discount)/100); 
 
     amount.val(calcAmount); 
 
     calculateTotal(); 
 
    } 
 

 
    function calculateTotal() { 
 
     var sum = 0; 
 
     $('#mptblBill tbody tr').each(function() { 
 
      sum = parseFloat(sum) + parseFloat($(this).find('td:eq(4) input').val()); 
 
     }); 
 
     $('#txtTotalWdoutTax').val(sum); 
 
    } 
 

 
    function calculateTax(element) { 
 
     var amount = $('#txtTotalWdoutTax').val(); 
 
     var taxAmount = amount * parseFloat($(element).val())/100; 
 
     if ($(element).is(":checked")) { 
 
      $(element).closest('td').next('td').find('input').val(taxAmount); 
 
     } 
 
     else { 
 
      $(element).closest('td').next('td').find('input').val(0); 
 
     } 
 
     calculateTotalBill(); 
 
    } 
 

 
    function calculateTotalBill() { 
 
     var amount = $('#txtTotalWdoutTax').val()==''?0:$('#txtTotalWdoutTax').val(); 
 
     var taxTotal = 0; 
 
     $('#calcTable tbody tr').each(function() { 
 
      var a = $(this).find('td:eq(1) input[name^="txt_"]').length; 
 
      var b = $(this).find('td:eq(1) input[name^="txt_"]').val(); 
 
      if (a > 0) { 
 
       taxTotal = parseFloat(taxTotal) + parseFloat(b==''?0:b); 
 
      } 
 
     }); 
 
     $('#txtTotal').val(parseFloat(amount) + parseFloat(taxTotal)); 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table style="width: 95%;" id="mptblBill" class="no-footer dataTable" role="grid"> 
 
    
 
    <tbody> 
 
      
 
    <tr role="row" class=""> 
 
       <td> 
 
        <select onchange="getPrice(this);" id="ddlItemId_0"> 
 
          <option value="1">Crocin Medicine</option> 
 
          <option value="3">DCold Total</option> 
 
          <option value="4">Rice</option> 
 
        </select> 
 
       </td> 
 
       <td><input type="text" disabled="disabled" class="width100" value="" id="txtItemPrice_0"></td> 
 
       <td><input type="text" onchange="calculateAmount(this);" class="width100" value="" id="txtQuantity_0"></td> 
 
       <td><input type="text" onchange="calculateAmount(this);" class="width100" value="" id="txtDiscount_0"></td> 
 
       <td><input type="text" disabled="disabled" class="width100" value="" id="txtAmount_0"></td> 
 
       <td><input type="button" class="width100" value="+" id="btnAdd_0"></td> 
 
      </tr></tbody> 
 
<thead> 
 
     <tr role="row"><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 216px;">Item Name</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 188px;">Item Price</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 188px;">Quantity</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 188px;">Discount</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 188px;">Amount</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 109px;">Action</th></tr> 
 
    </thead> 
 
</table> 
 
<table id="calcTable" style="width:100%; margin-left:32%;"> 
 
    <tbody> 
 
     <tr> 
 
      <td colspan="6"> 
 
       <label class="pullRight">Total Amount Without Tax </label> 
 
      </td> 
 
      <td colspan="2"> 
 
       <input type="text" style="width:188px;" value="" disabled="disabled" id="txtTotalWdoutTax"> 
 
      </td> 
 
     </tr> 
 
      <tr> 
 
       <td colspan="6"> 
 
        <input type="checkbox" onchange="calculateTax(this);" value="12" style="display:inline" id="chkTax_1" class="pullRight"><label style="display:inline" class="pullRight"> VAT - 12 % </label> 
 
       </td> 
 
       <td colspan="2"> 
 
        <input type="text" style="width:188px;" value="" disabled="disabled" name="txt_1"> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td colspan="6"> 
 
        <input type="checkbox" onchange="calculateTax(this);" value="2" style="display:inline" id="chkTax_2" class="pullRight"><label style="display:inline" class="pullRight"> SAT - 2 % </label> 
 
       </td> 
 
       <td colspan="2"> 
 
        <input type="text" style="width:188px;" value="" disabled="disabled" name="txt_2"> 
 
       </td> 
 
      </tr> 
 
     <tr> 
 
      <td colspan="6"> 
 
       <label class="pullRight">Total Amount </label> 
 
      </td> 
 
      <td colspan="2"> 
 
       <input type="text" style="width:188px;" value="" disabled="disabled" id="txtTotal"> 
 
      </td> 
 
     </tr> 
 
    </tbody> 
 
</table>

+0

Es funktionierte danke :) –