用javascript計算總計（onkeyup）

如何使用java腳本（onkeyup）計算總計總數？這是我的編碼用javascript計算總計（onkeyup）

<html> 
    <head> 
     <form method = "POST" action="text.php" name="form"> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <link rel="stylesheet" href="css/jquery-ui.css"/> 
     <script src="js/jquery-1.9.1.js"></script> 
     <script src="js/jquery-ui.js"></script> 
     <!--<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>--> 
     <script type="text/javascript"> 

     function cal1() { 
     var a = $(".qty1").val(); 
     var b = $(".price1").val(); 
     c1 = a * b; //a * b 
     $(".total1").val(c1); 
     } 

     function cal2() { 
     var a = $(".qty2").val(); 
     var b = $(".price2").val(); 
     c2 = a * b; //a * b 
     $(".total2").val(c2); 
     } 

     function grandtotal() { 
     var a = $(".total1").val(); 
     var b = $(".total2").val(); 
     z = a+b; //+ 
     $(".grandtotal").val(z); 
     } 
     </script> 

    </head> 
    <body> 


<table border="1"> 
        <tr> 
         <td> 
          <table height="51" border="0" cellspacing="2"> 
           <tr> 
            <td> 
             <div align="center">Price</div> 
            </td> 
            <td> 
             <div align="center"> Total Price</div> 
            </td> 
           </tr> 
           <tr> 

            <td> 
             <input class="qty1" type="text" name="qty1" onblur="qty_blur(this);" onkeyup="cal1();" value=""> 
            </td> 
            <td> 
             <input class="price1" type="text" name="price1" onblur="price_blur(this);" onkeyup="cal1();" value=""> 
            </td> 
            <td> 
             <input class="total1" type="text" name="total1" value="0" readonly=true onkeyup="grandtotal();"> 
            </td> 
           </tr> 
           <tr> 
            <td> 
             <input class="qty2" type="text" name="qty2" onblur="qty_blur(this);" onkeyup="cal2();" value=""> 
            </td> 
            <td> 
             <input class="price2" type="text" name="price2" onblur="price_blur(this);" onkeyup="cal2();" value=""> 
            </td> 
            <td> 
             <input class="total2" type="text" name="total2" value="0" readonly=true onkeyup="grandtotal();"> 
            </td> 
           </tr> 
          </table> 
         </td> 
        </tr> 
       </table> 
       <table> 
        <tr div class="grandtotal"> 
         <td> 
          Grand Total : 
         </td> 
         <td> 
          <input class="grandtotal" name="grandtotal" type="text" readonly=true value=""> 
         </td> 
        </tr> 
        </div> 
       </table> 
    </body> 
</html>

它是CAL1和CAL2已經是正確的，但總計保持空當CAL和CAL2已經計算？如何總計自動計算+ ???形成總CAL1和總CAL2

來源

2014-10-11 Vilthering

使用'parseInt（）'或'parseFloat（）'將輸入字段中的文本值解析爲數字值。（So：'var a = parseInt（$（「。total1」）。val（））;'） – myfunkyside 2014-10-11 16:27:39

並且我建議你在'c1'，'c2'和'z'之前也使用'var'？（否則它們會被當作全局變量） – myfunkyside 2014-10-11 16:31:14

Thx對於你的評論，你這樣介意嗎？ var a = parseInt（$（「。qty1」）。val（））; \t \t \t var b = parseInt（$（「。price1」）。val（））; \t \t \t var c1 = parseInt（a）+ parseInt（b）; \t \t \t $（「。total1」）。val（c1）; – Vilthering 2014-10-11 16:43:57

你相關的grandtotal到onkeyup總計投入。但這些投入永遠不會收到onkeyup，因爲它們是readonly。

作爲一個快速的解決方案，我建議只是要求從cal1和cal2grandtotal：

function cal1() { 
     var a = $(".qty1").val(); 
     var b = $(".price1").val(); 
     c1 = a * b; //a * b 
     $(".total1").val(c1); 
     grandtotal(); 
    } 

    function cal2() { 
     var a = $(".qty2").val(); 
     var b = $(".price2").val(); 
     c2 = a * b; //a * b 
     $(".total2").val(c2); 
     grandtotal(); 
    }

而且，@myfunkyside建議，你必須正確地解析輸入數字。否則，您會將總計連接爲字符串。

function grandtotal() { 
     var a = parseInt($(".total1").val(), 10); 
     var b = parseInt($(".total2").val(), 10); 
     z = a+b; //+ 
     $(".grandtotal").val(z); 
    }

來源

2014-10-11 16:36:42 dreyescat

Thx for ur comment :) – Vilthering 2014-10-11 17:02:22

用javascript計算總計（onkeyup）

回答

相關問題