使用Javascript进行不同的计算（加，减，减去perentage ...）

时间：2014-12-27 16:14:49

标签： javascript jquery html

我一直在网上搜索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>

基本上我需要的是一个动态解决方案，当我在第一个输入中输入价格示例200时，数量3和不计数50（百分比）最后一个输入应该进行数学计算，乘以200x3并扣除折扣（ IF折扣）并将结果放入输入total1。

不是，我的桌子AKA形式，用于为客户制作QUOTES，我有一个添加线条的JS脚本（这就是为什么id＆＃39; s和名字在前面有1＆＃39;每行在其旁边添加一个数字。

比同一个脚本，应该计算一个总计，添加所有可用的总数并将结果放在一个名为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脚本来计算一个select选项，客户需要支付多少钱。如果我选择20％，结果将显示在<p></p>总计+大桶的20％中。

我在两天前从stackoverflow找到了JSfiddle中的一个表，但是我的计算机崩溃了，而且我一直在搜索，没有任何运气。

如果有人可以通过向我展示一个工作代码的方式来提供帮助，那将非常感激。

非常感谢你的时间。

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

我同意对这个问题的评论。任何具有双向数据绑定的框架都将帮助您更多地关注逻辑而不是视图。这是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>

相关问题
最新问题