Cannot get realtime calculate result use javascript in foreach condition

问题

now im working laravel project for implementing real time calculate result using javascript. but the condition is, the real time calculate is inside in foreach() code. here is the case

• Background Yellow is <input> code
• Background Red is realtime calculate result by Javascript

Realtime calculate have 2 way to implement :

1. Get result "Total Each" for each row
2. Get result "Grand Total" for each column

from now. i just able to get "Grand Total" for column "Price in dollar" and Column "discount".

the problem is :

1. I still not able to get realtime result for each row "Total Each" , E2 = C2-(C2*D2), E3= C3-(C3*D3), E4= C4-(C4*D4), E5= C5-(C5*D5)
2. Grand total for column "Total Each", 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>

回答1:

Just run the same function on any change

1. Added thead, tbody and tfoot and fixed the rowspan for the total
2. Used jQuery map and JS reduce to get the totals
3. Navigated the fields using closest. You can simplify the $(input).closest("td").next().find("input").val(); if you give the line total a class

$(function() {

  $("tbody").on("input", function() {
    const totalPrice = $(".price").map(function(i, input) {
      const val = input.value && !isNaN(input.value) ? +input.value : 0;
      $(input).closest("tr").find("td").eq(4).text(val)
      return val;
    }).get().reduce((acc, cur) => { acc += cur; return acc; }, 0)
    $("#totalprice").text(totalPrice);

    const totalEach = $(".price").map(function(i, input) {
      const price = input.value && !isNaN(input.value) ? +input.value : 0;
      let  discount = $(input).closest("td").next().find("input").val();
      discount = discount && !isNaN(discount) ? +discount : 0;
      const val = (price - price * (discount/100))
      $(input).closest("tr").find("td").eq(4).text(val.toFixed(2))
      return val;
    }).get().reduce((acc, cur) => { acc += cur; return acc; }, 0)

    $("#totalEach").text(totalEach.toFixed(2))

    const totalDiscount = $(".discount").map(function(i, input) {
      return input.value && !isNaN(input.value) ? +input.value : 0;
    }).get().reduce((acc, cur) => {
      acc += cur;
      return acc
    }, 0)
    $("#totaldiscount").text(totalDiscount);
  });

});

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

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Items</th>
      <th>Price in dollar</th>
      <th>Discount %</th>
      <th>Total Each</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td>Name 1</td>
      <td>Item 1</td>
      <td><input class='price' name="price[xxx]" type="text"></td>
      <td><input class='discount' name="discount[xxx]" type="text"></td>
      <td></td>
    </tr>
    <tr>
      <td>Name 1</td>
      <td>Item 1</td>
      <td><input class='price' name="price[yyy]" type="text"></td>
      <td><input class='discount' name="discount[yyy]" type="text"></td>
      <td></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Grand Total</td>
      <td><span id="totalprice"></span></td>
      <td><span id="totaldiscount"></span></td>
      <td id="totalEach"> </td>
    </tr>
    </tfoot>
</table>

来源：https://stackoverflow.com/questions/62910401/cannot-get-realtime-calculate-result-use-javascript-in-foreach-condition