文本框所有相乘值的總和
[英]Total sum of all multiplied values of textboxes
問題描述
我想乘以文本框值，然后乘以所有答案值的總和。 例：
SUM (NSP * Current Sales)
該程序運行良好，但是當我更改任何值時，它會添加更改而不是替換值。 它應該替換數組的值。
並且如果可能的話，也請盡量減少代碼邏輯。 謝謝。
$(document).ready(function() { var val1; var val2; var multi; one(); second(); }); function one() { $(document).on("change", ".qty1", function() { var sumqty1 = 0; sumqty1 += $(this).val(); val1 = sumqty1; }); } function second() { $(document).on("change", ".qty2", function() { var sumqty1 = 0; var sumqty2 = 0; sumqty1 += $(this).closest('tr').find('.qty1').val(); sumqty2 += $(this).val(); val1 = sumqty1; val2 = sumqty2; mul(val1, val2); }); } var arr = []; function mul(a, b) { var hh; multi = a * b; arr.push(multi); var totalsum = 0; for (var i in arr) { var value = arr[i]; totalsum = parseInt(totalsum, 10) + parseInt(value, 10); $("#totalvalue").text(totalsum); } console.log(arr); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table style="width: 100%;" width="100%" cellspacing="0"> <thead> <tr> <th>Product Name</th> <th>NSP</th> <th>Current Sales</th> <th>Closing Balance</th> </tr> </thead> <tfoot> <tr> <th>Product Name</th> <th>NSP</th> <th>Current Sales</th> <th><span id='totalvalue'></span></th> </tr> </tfoot> <tbody> <tr> <td>Satou</td> <td><input type="text" class="qty1" value="1" disabled /></td> <td><input type="text" class="qty2" value="" /></td> <td>23</td> </tr> <tr> <td>panadol</td> <td><input type="text" class="qty1" value="2" disabled /></td> <td><input type="text" class="qty2" value="" /></td> <td>131</td> </tr> <tr> <td>disprine</td> <td><input type="text" class="qty1" value="3" disabled/></td> <td><input type="text" class="qty2" value="" /></td> <td>37</td> </tr> <tr> <td>panadol</td> <td><input type="text" class="qty1" value="4" disabled /></td> <td><input type="text" class="qty2" value="" /></td> <td>173</td> </tr> </tbody> </table>
3 個解決方案
解決方案1
1 已采納 2017-11-14 18:37:42
您不斷向arr添加新值，並且這里有很多共享的可變狀態。
如果表中沒有那么多行，則最好在每次值更改時重新計算整個總數。 這樣一來，數據踏入自身的風險就會降低：
$(document).ready(function() { $(document).on('change', '.qty1, .qty2', recalculate); function getTotal() { return $('#myTable tr') .toArray() .map($) .map(function (row) { return row.find('.qty1').val() * row.find('.qty2').val(); }) .filter(function (val) { return !Number.isNaN(val); }) .reduce(function (a, b) { return a + b; }, 0); } function recalculate() { $("#totalvalue").text(getTotal()); } });
<html> <head> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> </head> <body> <table id="myTable" style="width: 100%;" width="100%" cellspacing="0"> <thead> <tr> <th>Product Name</th> <th>NSP</th> <th>Current Sales</th> <th>Closing Balance</th> </tr> </thead> <tfoot> <tr> <th>Product Name</th> <th>NSP</th> <th>Current Sales</th> <th><span id='totalvalue'></span></th> </tr> </tfoot> <tbody> <tr> <td>Satou</td> <td><input type="text" class="qty1" value="1" disabled /></td> <td><input type="text" class="qty2" value="" /></td> <td>23</td> </tr> <tr> <td>panadol</td> <td><input type="text" class="qty1" value="2" disabled /></td> <td><input type="text" class="qty2" value="" /></td> <td>131</td> </tr> <tr> <td>disprine</td> <td><input type="text" class="qty1" value="3" disabled/></td> <td><input type="text" class="qty2" value="" /></td> <td>37</td> </tr> <tr> <td>panadol</td> <td><input type="text" class="qty1" value="4" disabled /></td> <td><input type="text" class="qty2" value="" /></td> <td>173</td> </tr> </tbody> </table> </body> </html>
解決方案2
0 2017-11-14 18:39:16
現在的方式是，按照創建順序將新元素添加到數組中，這不允許您以后訪問它們以更改它們，因為它們可以以任何順序存儲。
下面的代碼根據val1的值將每個值保存在數組中，以便每個元素在數組中都有指定的位置。 因此，您可以在更改任何值時更新它們，如下所示：
var arr = []; function one() { $(document).on("change", ".qty1", function() { var sumqty1 = $(this).val(); }); } function second() { $(document).on("change", ".qty2", function() { var val1 = $(this).closest('tr').find('.qty1').val();; var val2 = $(this).val(); mul(val1, val2); }); } function mul(a, b) { arr[a - 1] = a * b; var totalsum = 0; for (var i in arr) { var value = arr[i]; totalsum = parseInt(totalsum, 10) + parseInt(value, 10); $("#totalvalue").text(totalsum); } console.log(arr); } $(document).ready(function() { one(); second(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table style="width: 100%;" width="100%" cellspacing="0"> <thead> <tr> <th>Product Name</th> <th>NSP</th> <th>Current Sales</th> <th>Closing Balance</th> </tr> </thead> <tfoot> <tr> <th>Product Name</th> <th>NSP</th> <th>Current Sales</th> <th><span id='totalvalue'></span></th> </tr> </tfoot> <tbody> <tr> <td>Satou</td> <td><input type="text" class="qty1" value="1" disabled /></td> <td><input type="text" class="qty2" value="" /></td> <td>23</td> </tr> <tr> <td>panadol</td> <td><input type="text" class="qty1" value="2" disabled /></td> <td><input type="text" class="qty2" value="" /></td> <td>131</td> </tr> <tr> <td>disprine</td> <td><input type="text" class="qty1" value="3" disabled/></td> <td><input type="text" class="qty2" value="" /></td> <td>37</td> </tr> <tr> <td>panadol</td> <td><input type="text" class="qty1" value="4" disabled /></td> <td><input type="text" class="qty2" value="" /></td> <td>173</td> </tr> </tbody> </table>
我還取出了一些不必要的代碼，包括：
- 您的
second()函數中的hh聲明（因為未使用該變量second() - 您的
one()函數中的幾行無關 -
multi變量 -
sumqty1和sumqty2變量（您可以只使用val1和val2）
val1和val2變量不需要是全局變量，因為您只在一個函數中使用它們並將它們作為參數傳遞給另一個函數。
您也可以根據需要刪除one()函數，因為這些值似乎是靜態的-但我不確定是否允許在原始代碼中更改該值。
解決方案3
0 2017-11-14 18:42:33
我說類似的話：
$(".qty1, .qty2").on("change", function(){
var qty2 = $(".qty2"),
total = 0;
$(".qty1").each(function(ind){
total += $(qty2[ind]).val() * $(this).val();
})
$("#totalvalue").text(total)
})
在文檔末尾添加。
編輯了一下
計算4個數值和稅款的JavaScript計算器乘以總數
[英]Javascript calculator that calculates 4 numeric values and tax is multiplied to the total
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.