在foreach条件下使用javascript无法获取实时计算结果

Question

现在我正在工作 laravel 项目，使用 javascript 实现实时计算结果。但条件是，实时计算在 foreach() 代码中。情况是这样的

• 背景黄色是<input>代码

• 背景红色是Javascript实时计算的结果

实时计算有两种实现方式：

1. 获取每行的结果“Total Each”

2. 获取每列的结果“总计”

现在起。我只能获得“美元价格”列和“折扣”列的“总计”。

问题是 ：

1. 我仍然无法获得每行“Total Each”的实时结果， E2 = C2-(C2*D2), E3= C3-(C3*D3), E4= C4-(C4*D4), E5= C5-(C5*D5)

2. “总计”列的总计，E6 = E2 + E3 + E4 + E5

$(document).ready(function() {

  $(".price").keyup(function() {

    var totalprice = 0;

    $.each($(".price"), function(key, input) {

      if (input.value && !isNaN(input.value)) {

        totalprice += parseFloat(input.value);

      }

    });

    $("#totalprice").html(totalprice);

  });

  $(".discount").keyup(function() {

    var totaldiscount = 0;

    $.each($(".discount"), function(key, input) {

      if (input.value && !isNaN(input.value)) {

        totaldiscount += parseFloat(input.value);

      }

    });

    $("#totaldiscount").html(totaldiscount);

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<table>

  <tr>

    <td>Name</td>

    <td>Items</td>

    <td>Price in dollar</td>

    <td>Discount %</td>

    <td>Total Each</td>

  </tr>

  @foreach ($buyers as $key => $val)

  <tr>

    <td>{{ $val['name'] }}</td>

    <td>{{ $val['items'] }}</td>

    <td><input class='price' name="price[ {{$key}} ][ {{$val['id']}} ]" type="text"></td>

    <td><input class='discount' name="discount[ {{$key}} ][ {{$val['id']}} ]" type="text"></td>

    <td> ?get total each? </td>

  </tr>

  @endforeach

  <tr>

    <td rowspan="2">Grand Total</td>

    <td><span id="totalprice"></span></td>

    <td><span id="totaldiscount"></span></td>

    <td> get "grand total" from "total each" </td>

    </td>

</table>

Answer 1

只需对任何更改运行相同的函数添加了 thead、tbody 和 tfoot 并修复了总计的行跨度使用 jQuery map 和 JS reduce 来获取总数使用最接近的导航字段。$(input).closest("td").next().find("input").val();如果你给行总计一个类，你可以简化$(function() {&nbsp; $("tbody").on("input", function() {&nbsp; &nbsp; const totalPrice = $(".price").map(function(i, input) {&nbsp; &nbsp; &nbsp; const val = input.value && !isNaN(input.value) ? +input.value : 0;&nbsp; &nbsp; &nbsp; $(input).closest("tr").find("td").eq(4).text(val)&nbsp; &nbsp; &nbsp; return val;&nbsp; &nbsp; }).get().reduce((acc, cur) => { acc += cur; return acc; }, 0)&nbsp; &nbsp; $("#totalprice").text(totalPrice);&nbsp; &nbsp; const totalEach = $(".price").map(function(i, input) {&nbsp; &nbsp; &nbsp; const price = input.value && !isNaN(input.value) ? +input.value : 0;&nbsp; &nbsp; &nbsp; let&nbsp; discount = $(input).closest("td").next().find("input").val();&nbsp; &nbsp; &nbsp; discount = discount && !isNaN(discount) ? +discount : 0;&nbsp; &nbsp; &nbsp; const val = (price - price * (discount/100))&nbsp; &nbsp; &nbsp; $(input).closest("tr").find("td").eq(4).text(val.toFixed(2))&nbsp; &nbsp; &nbsp; return val;&nbsp; &nbsp; }).get().reduce((acc, cur) => { acc += cur; return acc; }, 0)&nbsp; &nbsp; $("#totalEach").text(totalEach.toFixed(2))&nbsp; &nbsp; const totalDiscount = $(".discount").map(function(i, input) {&nbsp; &nbsp; &nbsp; return input.value && !isNaN(input.value) ? +input.value : 0;&nbsp; &nbsp; }).get().reduce((acc, cur) => {&nbsp; &nbsp; &nbsp; acc += cur;&nbsp; &nbsp; &nbsp; return acc&nbsp; &nbsp; }, 0)&nbsp; &nbsp; $("#totaldiscount").text(totalDiscount);&nbsp; });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><table>&nbsp; <thead>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th>Name</th>&nbsp; &nbsp; &nbsp; <th>Items</th>&nbsp; &nbsp; &nbsp; <th>Price in dollar</th>&nbsp; &nbsp; &nbsp; <th>Discount %</th>&nbsp; &nbsp; &nbsp; <th>Total Each</th>&nbsp; &nbsp; </tr>&nbsp; </thead>&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>Name 1</td>&nbsp; &nbsp; &nbsp; <td>Item 1</td>&nbsp; &nbsp; &nbsp; <td><input class='price' name="price[xxx]" type="text"></td>&nbsp; &nbsp; &nbsp; <td><input class='discount' name="discount[xxx]" type="text"></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>Name 1</td>&nbsp; &nbsp; &nbsp; <td>Item 1</td>&nbsp; &nbsp; &nbsp; <td><input class='price' name="price[yyy]" type="text"></td>&nbsp; &nbsp; &nbsp; <td><input class='discount' name="discount[yyy]" type="text"></td>&nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; </tr>&nbsp; </tbody>&nbsp; <tfoot>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td colspan="2">Grand Total</td>&nbsp; &nbsp; &nbsp; <td><span id="totalprice"></span></td>&nbsp; &nbsp; &nbsp; <td><span id="totaldiscount"></span></td>&nbsp; &nbsp; &nbsp; <td id="totalEach"> </td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; </tfoot></table>