JQuery 将 table 行的输入值乘以 AJAX

Question

我想通过将各行的输入相乘来计算每行的总价，然后使用 JQuery 将总计列的所有总值相加，最终计算出总计。当我输入值时，我只在第一行显示总计。任何帮助将不胜感激。

blade

@foreach($service->invoices as $invoice)
    <tr>
        <td class="text-right">{{ $invoice->description }}</td>
        <td>
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" name="custom{{ $invoice->id }}" id="custom{{ $invoice->id }}">
                <label class="custom-control-label" for="custom{{ $invoice->id }}"></label>
            </div>
        </td>
        <td>
            <div class="form-row justify-content-center">
                <div class="form-group mb-0">
                    <div class="input-group mx-auto mb-0">
                        <div class="number-input amount">
                            <button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" id="decrease"></button>
                            <input class="quantity bg-light" id="quantity" min="0" placeholder="0" name="quantity" value="0" type="number">
                            <button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus" id="increment"></button>
                        </div>
                    </div>
                </div>
            </div>
        </td>
        <td class="price">{{ $invoice->price }}</td>
        <td class="total">0</td>
    </tr>
@endforeach

脚本

<script>
    $("#decrease , #increment , .quantity").on("click input", function() {
        var selectors = $(this).closest('tr'); //get closest tr
        var quantity = selectors.find('.quantity').val(); //get qty
        if (!quantity || quantity < 0)
            return;
        var price = parseFloat(selectors.find('.price').text());
        var total = (price * quantity);
        selectors.find('.total').text(total); //add total
        mult += total;
        $("#grandTotal").text(mult);
    })
</script>

Answer 1

您需要遍历 tr 以在每个 td 中获取 total 的值，然后检查该值是否不为空，并根据此将该值添加到 mult 。此外，您需要使用 class 而不是 id 根据该更改查询选择器，即：.increment 和 .decrease.

演示代码 :

$(".decrease , .increment , .quantity").on("click input", function() {


  var selectors = $(this).closest('tr'); //get closest tr
  var quantity = selectors.find('.quantity').val(); //get qty
  if (!quantity || quantity < 0)
    return;
  var price = parseFloat(selectors.find('.price').text());
  var total = (price * quantity);
  selectors.find('.total').text(total); //add total
  var mult = 0;
  //loop through trs
  $("tr").each(function() {
    //get total value check its not "" else give value =0 to avoid Nan error
    var total = $(this).find(".total").text() != "" ? $(this).find(".total").text() : 0;
    mult = parseFloat(total) + mult;

  })
  //add value to div
  $("#grandTotal").text(mult);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="text-right">A</td>
    <td>
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" name="custom{{ $invoice->id }}" id="custom{{ $invoice->id }}">
        <label class="custom-control-label" for="custom{{ $invoice->id }}"></label>
      </div>
    </td>
    <td>
      <div class="form-row justify-content-center">
        <div class="form-group mb-0">
          <div class="input-group mx-auto mb-0">
            <div class="number-input amount">
              <!--just add class-->
              <button class="minus decrease" onclick="this.parentNode.querySelector('input[type=number]').stepDown();" id="decrease">-</button>
              <input class="quantity bg-light" id="quantity" min="0" placeholder="0" name="quantity" value="0" type="number">
              <button onclick="this.parentNode.querySelector('input[type=number]').stepUp();" class="plus increment" id="increment">+</button>
            </div>
          </div>
        </div>
      </div>
    </td>
    <td class="price">13
      <td class="total"></td>
  </tr>
  <tr>
    <td class="text-right">B</td>
    <td>
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" name="custom{{ $invoice->id }}" id="custom{{ $invoice->id }}">
        <label class="custom-control-label" for="custom{{ $invoice->id }}"></label>
      </div>
    </td>
    <td>
      <div class="form-row justify-content-center">
        <div class="form-group mb-0">
          <div class="input-group mx-auto mb-0">
            <div class="number-input amount">
              <!--just add class-->
              <button class="minus decrease" onclick="this.parentNode.querySelector('input[type=number]').stepDown();" id="decrease">-</button>
              <input class="quantity bg-light" id="quantity" min="0" placeholder="0" name="quantity" value="0" type="number">
              <button onclick="this.parentNode.querySelector('input[type=number]').stepUp();" class="plus increment" id="increment ">+</button>
            </div>
          </div>
        </div>
      </div>
    </td>
    <td class="price">135
      <td class="total"></td>
  </tr>
</table>
Grand Total :
<div id="grandTotal">0</div>

JQuery 将 table 行的输入值乘以 AJAX

JQuery multiply input values of table rows in AJAX

ajax

laravel-5.8