使用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>