使用Javascript的不同調用（add，substract，substract by perentage ...）

Question

我一直在尋找網絡和SO大約一個星期的時間來解決（對我來說）一個複雜的答案，我相信。請注意，JS和我並不是真正的好朋友。

我有需要以下計算可知代碼4個細胞的表：

<table> 
    <tr> 
    <td><input type="text" id="price1" name="price1"></td> 
    <td><input type="text" id="quantity1" name="quantity1"></td> 
    <td><input type="text" id="discount1" name="discount1"></td> 
    <td><input type="text" id="total1" name="total1"></td> 
    </tr> 
</table> 

Basicaly我需要的是一個動態的解決方案，當我在第一輸入輸入價格示例200中，數量3，和50（百分比）最後的輸入應該做數學，乘以200x3和susbtract折扣（IF折扣），並把結果在輸入total1。

不，我的表AKA形式，是用來製造爲客戶報價，我有一個JS腳本，將線（這就是爲什麼ID和名字的有1個在前面，每條線增加了旁邊的一個數字。

比同樣的腳本，應該計算總計，添加所有總計可用，puting結果在輸入稱爲grandtotal例

<table> 
    <tr> 
    <td><input type="text" id="price1" name="price1"></td> 
    <td><input type="text" id="quantity1" name="quantity1"></td> 
    <td><input type="text" id="discount1" name="discount1"></td> 
    <td><input type="text" id="total1" name="total1"></td> 
    </tr> 
     <tr> 
    <td><input type="text" id="price2" name="price2"></td> 
    <td><input type="text" id="quantity2" name="quantity2"></td> 
    <td><input type="text" id="discount2" name="discount2"></td> 
    <td><input type="text" id="total2" name="total2"></td> 
    </tr> 
     <tr> 
    <td><input type="text" id="price3" name="price3"></td> 
    <td><input type="text" id="quantity3" name="quantity3"></td> 
    <td><input type="text" id="discount3" name="discount3"></td> 
    <td><input type="text" id="total3" name="total3"></td> 
    </tr> 
<tr> 
    <td>grand total</td> 
    <td><select><option value="10">VAT 10%</option value="20é><option>VAT 20%</option></select> 
    <td>VAT = (shows only the taxes of the amount)</td> 
    <td>grand total = all totals + the vat</td> 
</tr> 
</table> 

而且，因爲這個事情是複雜的，我需要一個js腳本，將計算在選擇選項中，客戶需要支付多少錢如果我選擇20％，結果將顯示在<p></p>中g的20％蘭特總額+增值稅。

兩天前我在stackoverflow的JSfiddle中找到了一張表，但是我的電腦崩潰了，而且我一直在搜索沒有任何運氣。

如果有人可以通過向我展示工作代碼的jsfiddle來提供幫助，我們將非常感謝。

非常感謝您的時間。

Answer 1

對所有相似字段使用類，而不是編號的ID。然後您可以使用DOM遍歷函數來查找所有相關的輸入，並執行計算。

$(".price, .quantity, .discount, #vat").change(function() { 
 
    var row = $(this).closest("tr"); 
 
    var price = parseFloat($(".price", row).val()); 
 
    var quantity = parseInt($(".quantity", row).val(), 10); 
 
    var discount = parseFloat($(".discount", row).val()); 
 
    if (price && quantity) { 
 
    if (isNaN(discount)) { 
 
     discount = 0; 
 
    } 
 
    var total = price * quantity * (1 - discount/100); 
 
    $(".total", row).val(total.toFixed(2)); 
 
    } else { 
 
    $(".total", row).val(""); 
 
    } 
 
    var grand_total = 0; 
 
    $(".total").each(function() { 
 
    if (this.value != '') { 
 
     grand_total += parseFloat(this.value); 
 
    } 
 
    }); 
 
    grand_total *= (1 + $("#vat").val()/100); 
 
    $("#grand_total").val(grand_total.toFixed(2)); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr><th>Price</th><th>Quantity</th><th>Discount%</th><th>Total</th></tr> 
 
    <tr> 
 
    <td> 
 
     <input type="text" class="price" name="price1"> 
 
    </td> 
 
    <td> 
 
     <input type="text" class="quantity" name="quantity1"> 
 
    </td> 
 
    <td> 
 
     <input type="text" class="discount" name="discount1"> 
 
    </td> 
 
    <td> 
 
     <input type="text" class="total" name="total1"> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="text" class="price" name="price2"> 
 
    </td> 
 
    <td> 
 
     <input type="text" class="quantity" name="quantity2"> 
 
    </td> 
 
    <td> 
 
     <input type="text" class="discount" name="discount2"> 
 
    </td> 
 
    <td> 
 
     <input type="text" class="total" name="total2"> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="text" class="price" name="price3"> 
 
    </td> 
 
    <td> 
 
     <input type="text" class="quantity" name="quantity3"> 
 
    </td> 
 
    <td> 
 
     <input type="text" class="discount" name="discount3"> 
 
    </td> 
 
    <td> 
 
     <input type="text" class="total" name="total3"> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>grand total</td> 
 
    <td> 
 
     <select id="vat"> 
 
     <option value="10">VAT 10%</option> 
 
     <option value="20">VAT 20%</option> 
 
     </select> 
 
     <td>VAT = (shows only the taxes of the amount)</td> 
 
     <td>grand total = all totals + the vat</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input id="grand_total"></td> 
 
    </tr> 
 
</table>

Answer 2

我同意意見的問題。任何具有雙向數據綁定的框架都將幫助您將注意力集中在邏輯上而不是視圖上。下面是AngularJS解決方案：http://jsbin.com/bilagisona/1/

angular.module("myApp", []).controller("myCtrl", ["$scope", 
 
    function($scope) { 
 
    $scope.items = []; 
 
    $scope.vat = 10; 
 
    $scope.gt = 0; 
 
    $scope.buffer = { 
 
     name: null, 
 
     price: 0, 
 
     quantity: 0, 
 
     discount: 0, 
 
     total: 0 
 
    }; 
 

 
    $scope.add = function() { 
 
     $scope.items.push($scope.buffer); 
 
     $scope.buffer = { 
 
     name: null, 
 
     price: null, 
 
     quantity: null, 
 
     discount: null, 
 
     total: null 
 
     }; 
 

 
     $scope.calculate_gt(); 
 
    }; 
 

 
    $scope.calculate = function() { 
 
     var totalwithoutdiscount = $scope.buffer.price * $scope.buffer.quantity; 
 
     $scope.buffer.total = totalwithoutdiscount - (totalwithoutdiscount * ($scope.buffer.discount/100)); 
 
    }; 
 

 
    $scope.calculate_gt = function() { 
 
     $scope.gt = 0; 
 
     angular.forEach($scope.items, function(item) { 
 
     $scope.gt += item.total; 
 
     }); 
 

 
     $scope.gt += $scope.gt * $scope.vat/100; 
 
    }; 
 
    } 
 
]);

tr { 
 
    background: #e3e3e3; 
 
}

<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 

 
<head> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"> 
 
    </script> 
 
    <meta charset="utf-8"> 
 
    <title> 
 
    JS Bin 
 
    </title> 
 
</head> 
 

 
<body> 
 
    <div ng-controller="myCtrl"> 
 
    <table> 
 
     <thead> 
 
     <tr> 
 
      <td> 
 
      Name 
 
      </td> 
 
      <td> 
 
      Price 
 
      </td> 
 
      <td> 
 
      Quantity 
 
      </td> 
 
      <td> 
 
      Discount 
 
      </td> 
 
      <td> 
 
      Total 
 
      </td> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td> 
 
      <input type="text" placeholder="Name" ng-model="buffer.name"> 
 
      </td> 
 
      <td> 
 
      <input type="number" placeholder="Price" ng-model="buffer.price" ng-change="calculate()"> 
 
      </td> 
 
      <td> 
 
      <input type="number" placeholder="Quantity" ng-model="buffer.quantity" ng-change="calculate()"> 
 
      </td> 
 
      <td> 
 
      <input type="number" placeholder="Discount %" ng-model="buffer.discount" ng-change="calculate()"> 
 
      </td> 
 
      <td> 
 
      {{buffer.total}} 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    <button ng-click=add()> 
 
     + Add 
 
    </button> 
 
    <hr> 
 
    <h4> 
 
     Entries 
 
     </h4> 
 
    <table> 
 
     <thead> 
 
     <tr> 
 
      <td> 
 
      Name 
 
      </td> 
 
      <td> 
 
      Price 
 
      </td> 
 
      <td> 
 
      Quantity 
 
      </td> 
 
      <td> 
 
      Discount 
 
      </td> 
 
      <td> 
 
      Total 
 
      </td> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr ng-repeat="item in items"> 
 
      <td> 
 
      {{item.name}} 
 
      </td> 
 
      <td> 
 
      {{item.price}} 
 
      </td> 
 
      <td> 
 
      {{item.quantity}} 
 
      </td> 
 
      <td> 
 
      {{item.discount}} 
 
      </td> 
 
      <td> 
 
      {{item.total}} 
 
      </td> 
 
     </tr> 
 
     <tbody> 
 
    </table> 
 
    <hr>VAT%: 
 
    <input type=number placeholder="VAT" ng-model="vat" ng-change="calculate_gt()"> 
 
    </input> 
 
    <h4> 
 
     Total with VAT @{{vat}}%: {{gt}} 
 
    </h4> 
 
    </div> 
 
</body> 
 

 
</html>