2017-07-07 3 views
2

私はテキストボックスに値を入力し、Ajaxを使用して小計と合計ボタンをクリックしてリストに表示するレストラン注文フォームを作成しようとしています。削除と動的列の値の合計の計算が間違っています

私の問題は、小計の合計が私に間違った価値を与えることです。 と私は削除ボタンをクリックしても変わりません。

| qty |価格|小計|
| 10 | 3.50 | 35.00 |
| 10 | 9.00 | 90.00 |

合計:180.00代わりに、それは行×最後に小計値の数を計算し、前記125.00

TIAに添付されているコードスニペットをご覧ください。ここで

var impo = document.getElementById("imp_text"); 
 
var quant = document.getElementById("qta"); 
 

 
$(document).on("click", "table.dynatable button.delete-row", function() { 
 
    $(this).parents("tr").remove(); 
 
}); 
 

 
function loaddata() { 
 
    var importo = $("#imp_text").val(); 
 
    var quantita = $("#qta").val(); 
 
    var totale = importo * quantita; 
 
    var desc_importo = "Altro "; 
 
    var markup = "<tr><td><span class='sum_qta' name='sum_qta'>" + quantita + "</span></td><td>" + desc_importo + "</td><td>" + importo + "</td><td class='subtot' >" + totale + "</td><td><button type='button' class='delete-row'>X</button></td></tr>"; 
 

 
    $("table.dynatable tbody").append(markup); 
 

 
    var $tblrows = $("#tableordine tbody tr"); 
 
    $tblrows.each(function(index) { 
 
    var $tblrow = $(this); 
 

 
    if (!isNaN(totale)) { 
 

 
     $tblrow.find('.subtot').val(totale.toFixed(2)); 
 
     var grandTotal = 0; 
 

 
     $(".subtot").each(function() { 
 
     var stval = parseFloat($(this).val()); 
 
     grandTotal += isNaN(stval) ? 0 : stval; 
 
     }); 
 

 
     $('.grdtot').val(grandTotal.toFixed(2)); 
 
    } 
 

 
    }); 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<html lang="en"> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <font color="black"> 
 

 
    <table class="table dynatable" id="tableordine"> 
 
     <thead> 
 
     <tr> 
 
      <th>Qty</th> 
 
      <th>Import</th> 
 
      <th>Price</th> 
 
      <th>subtotal</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 

 
     </tbody> 
 
    </table> 
 

 
    <hr/> Totale:<input type="text" class="grdtot"> 
 

 
<hr/> 
 
    <FORM name="Keypad" action=""> 
 
     Import : <input name="ReadOut" id="imp_text" type="Text" size=24 value=" "> Quantity : <input type="text" name="readqta" id="qta" value="1" /> 
 
     <p> 
 

 
     <input type="button" id="entraordine" class="add-row menu_button" value="Entra" onclick="loaddata();" /> 
 
    </form> 
 
</body> 
 
</html>

+1

で行きます属性。 '$(" body ")。on(" click "、" #entraordine "、function(){ //ここにコード }); –

+0

なぜあなたは' val(totale)を持っていますか? '$ tblrow.find( '。subtot')の' .val() 'の代わりに' 'toFixed(2)' ')を使用しています。 –

+0

@ N.Ivanovので、小数点以下の桁数はtottaleとtoFIxed(2)の値を参照することができます。 – OFBrc

答えて

1

あなたは、私が最初にあなた自身のボタンのクリックイベントハンドラを記述するのではなく、 `onclickの= ""` HTMLを使用することができ示唆しているソリューションhttps://jsfiddle.net/tbskqrby/

$(document).on("click", "table.dynatable button.delete-row", function() { 
    $(this).parents("tr").remove(); 
    rowCal(); 
}); 

rowCal = function(){ 
    var $tblrows = $("#tableordine tbody tr"); 
    $tblrows.each(function(index) { 
     var $tblrow = $(this); 

     if (!isNaN(totale)) { 

      $tblrow.find('.subtot').val(totale.toFixed(2)); 
      var grandTotal = 0; 

      $(".subtot").each(function() { 
       var stval = parseFloat($(this).val()); 
       grandTotal += isNaN(stval) ? 0 : stval; 
      }); 

      $('.grdtot').val(grandTotal.toFixed(2)); 
     } 

    }); 
} 
+0

削除ボタンをクリックすると合計値が変更されますが、合計値の間違った値を返します。 – OFBrc

+0

@ Shiladityaなぜこれが解決策であるか説明できますか? – phuzi

+1

@OFBrcここでは、https://jsfiddle.net/tbskqrby/1/の解決方法を説明します。問題はあなたのvar stval = parseFloat($(this).val())にあります。 。私はそれをvar stval = parseFloat($(this).text())に変更しました。値を取得する。 – Shiladitya

関連する問題