2017-02-22 28 views
0

我有一張表格,用於計算項目總稅額(Item Price * Quantity - Discount%)的免稅額。Jquery屬性選擇器在第一次更改事件時不起作用

在沒有稅款的總金額上,我可以選擇增加VAT或SAT或兩者兼有。在檢查增值稅金額時,總金額應顯示在文本框中(Total Amount Without Tax + VAT/SAT)。該功能在calculateTotalBill()函數中實現。問題是它在CheckboxesVAT/SAT)的第一次更改事件上顯示NaN。在隨後的更改事件中,該功能正常工作。

下面是摘錄

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>

我在做什麼錯?任何幫助將不勝感激。

+0

退出這兩個值? parseFloat(金額)+ parseFloat(taxTotal) –

+0

@ÁlvaroTouzón我不明白。 'amount'是沒有稅金的總金額。 'taxTotal'是金額上的稅。 –

+0

這兩個值之一或者是字符串或者沒有定義 –

回答

0

試試這個

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

它的工作感謝:) –

相關問題