如何在jquery中设置同步的onkeyup函数

Question

jquery中的Onkeyup函数

我可以先在jquery中执行onkeyup函数，但我不知道如何使用onkeyup函数获得最终答案。请帮我解决这个问题。在这里，我的代码，任何人知道解决方案，请帮助:我的html代码：

​

$("#quantity-1,#price-1").keyup(function () { $('#total-1').val($('#price-1').val() * $('#quantity-1').val()); });
$("#quantity-2,#price-2").keyup(function () { $('#total-2').val($('#price-2').val() * $('#quantity-2').val()); });
$("#quantity-3,#price-3").keyup(function () { $('#total-3').val($('#price-3').val() * $('#quantity-3').val()); });
$("#quantity-4,#price-4").keyup(function () { $('#total-4').val($('#price-4').val() * $('#quantity-4').val()); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr><td>amount 1:<input type="text" id="price-1" value="15" readonly=""></td><td>qunatity 1:<input type="text" id="quantity-1"></td><td> total 1:<input type="text" name"amt" class="total" id="total-1" readonly=""></td></tr>
<tr><td>amount 2:<input type="text" id="price-2" value="14" readonly=""></td><td>qunatity 2:<input type="text" id="quantity-2"></td><td> total 2:<input type="text" name"amt" id="total-2" class="total" readonly=""></td></tr>
<tr><td>amount 3:<input type="text" id="price-3" value="13" readonly=""></td><td>qunatity 3:<input type="text" id="quantity-3"></td><td> total 3:<input type="text" name"amt" id="total-3" class="total" readonly=""></td></tr>
<tr><td>amount 4:<input type="text" id="price-4" value="12" readonly=""></td><td>qunatity 4:<input type="text" id="quantity-4"></td><td> total 4:<input type="text" name"amt" id="total-4" class="total" readonly=""></td></tr>
<tr><td></td>                                               <td></td>                                             <td>All total:<input type="text" name"amt" id="totalvalue"></td></tr>
</table>

​

https://codepen.io/selvaa369/pen/MWoNwVB

Answer 1

我猜你是想填写“全部”字段吧？如果是这样的话，您可以通过简化代码来实现它。

首先，删除放置在行元素上的所有增量id属性，例如#price-1和#quantity-1。将它们替换为公共类。

在这里，您可以使用input事件，因为当内容被粘贴或使用鼠标添加时，这也会触发，从而使用DOM遍历检索行中的所有字段，并计算总计。这种方法的好处是相同的HTML块将适用于无限多行。

最后，您可以循环遍历所有.total元素，以获得所有行的总和，并将其放入“all total”字段中。

说了这么多，试试这个：

​

let calcRowTotal = $row => {
  let price = $row.find('.price').val() || 0;
  let quantity = $row.find('.quantity').val() || 0;
  $row.find('.total').val(price * quantity);
}

let calcTotal = () => {
  let total = 0;
  $('.total').each((i, el) => total += parseFloat(el.value || 0));
  $('#totalvalue').val(total);
}

$('.quantity, .price').on('input', e => {
  let $row = $(e.target).closest('tr');
  calcRowTotal($row);
  calcTotal();
});

input { width: 30px; } /* just to make this demo fit in snippet window */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
  <tr>
    <td>amount 1: <input type="text" class="price" value="15" readonly></td>
    <td>qunatity 1: <input type="text" class="quantity"></td>
    <td>total 1: <input type="text" name "amt" class="total" readonly></td>
  </tr>
  <tr>
    <td>amount 2: <input type="text" class="price" value="15" readonly></td>
    <td>qunatity 2: <input type="text" class="quantity"></td>
    <td>total 2: <input type="text" name "amt" class="total" readonly></td>
  </tr>
  <tr>
    <td>amount 3: <input type="text" class="price" value="15" readonly></td>
    <td>qunatity 3: <input type="text" class="quantity"></td>
    <td>total 3: <input type="text" name "amt" class="total" readonly></td>
  </tr>
  <tr>
    <td>amount 4: <input type="text" class="price" value="15" readonly></td>
    <td>qunatity 4: <input type="text" class="quantity"></td>
    <td>total 4: <input type="text" name "amt" class="total" readonly></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td>All total: <input type="text" name "amt" id="totalvalue"></td>
  </tr>
</table>

​