javascript - 使用 Javascript 进行不同的计算(加、减、按百分比减去...)

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 8 年前。

Improve this question

我已经在网络上搜索了大约一周的时间，以寻找(对我来说)我认为复杂的答案的解决方案。请注意，JS 和我并不是真正的好 friend 。

我有一个包含 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中。

不是，我的表格又名表单，用于为客户制作报价，我有一个 JS 脚本，可以添加行(这就是为什么 id 和 name 前面有 1，每行旁边添加一个数字。

与相同的脚本相比，应该计算总计，添加所有可用总计并将结果放入名为 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> 中总额的 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>