Question

如何使用javascript onchange / onkeyup对循环内的值求和？我把它们中的每一个都编号为基于循环的id ...

这是我的代码示例

<?php 

$no = 1;
foreach($data as $array)
{
  echo "<tr>";
  echo "<td><input type='number' id='price".$no."' value='.$array['price'].'></td>";
  echo "<td><input type='number' id='discount".$no."' onkeyup='keyup(".$no.")'></td>";
  echo "<td><input type='number' id='total_price".$no."'></td>";
  echo "</tr>";

  $no++;
}
<input type='text' readonly id='total_payment'>

这是我的javascript

function keyup(id)
{
  var price = $('#price'+id).val();
  var discount= $('#discount'+id).val();

  total_price = parseFloat(price) - parseFloat(discount);
  $('#total_price'+id).val(total_price);
}

当我改变折扣价值时，它将所有total_price字段加总为total_payment 怎么做？我已经设置了一些表格来展示这个例子 JSFIDDLE：https://jsfiddle.net/20gb8n1g/

Answer 1

我让它在我的本地机器上工作，取得你在JsFiddle上的内容并修改parseFloat()调用之一，你使用大写L调用了这个调用：parseFLoat()。这应该是你的伎俩。

注意：请确保您在index {j}（或您的JavaScript中的任何文件）中的路径在<head>标记内正确无误。

<强> HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="index.js"></script>
  </head>
  <body>
   <table>
<tbody>
<tr>
  <td>Quantity</td>
  <td>Price</td>
  <td>Total Price</td>
  <td>Discount</td>
  <td>Total Price (Discount)</td>
</tr>
<tr>
  <td><input type='number' readonly value='2'></td>
  <td><input type='number' readonly value='20000'></td>
  <td><input type='number' id='tot_price1' readonly value='40000'></td>
  <td><input type='number' min='0.1' step='0.1' id='discount1' onkeyup='newFunc()'></td>
  <td><input type='number' readonly value='40000' id='total_price1'></td>
</tr>
<tr>
  <td><input type='number' readonly value='3'></td>
  <td><input type='number' readonly value='30000'></td>
  <td><input type='number' id='tot_price2' readonly value='90000'></td>
   <td><input type='number' min='0.1' step='0.1' id='discount2'></td>
  <td><input type='number' readonly value='90000'></td>
</tr>
<tr>
  <td><input type='number' readonly value='2'></td>
  <td><input type='number' readonly value='10000'></td>
  <td><input type='number' id='tot_price3' readonly value='20000'></td>
  <td><input type='number' min='0.1' step='0.1' id='discount3'></td>
  <td><input type='number' readonly value='20000'></td>
</tr>
<tr>
  <td><input type='number' readonly value='4'></td>
  <td><input type='number' readonly value='10000'></td>
  <td><input type='number' id='tot_price4' readonly value='40000'></td>
   <td><input type='number' min='0.1' step='0.1' id='discount4'></td>
  <td><input type='number' readonly value='40000'></td>
</tr>
</tbody>
<tfoot>
  <tr>
    <td colspan='4' style='text-align:right;'>Total Payment</td>
    <td><input type='number' ></td>
  </tr>
</tfoot>
</table>
  </body>
</html>

<强> JS：

function newFunc() {
  var total_price = $('#tot_price1').val();
  var discount = $('#discount1').val();

  n_discount = parseFloat(discount) / 100;
  v_discount = parseFloat(total_price) * parseFloat(n_discount);
  t_discount = parseFloat(total_price) - parseFloat(v_discount);
  $('#total_price1').val(t_discount);

}

Answer 2

在每个输入上附加keyup处理程序，然后进行数学运算应该以“实时”方式工作

$( document ).ready(function() {
  $("body").on("keyup", "input", function(event){
	  $(this).closest(".line").find(".tot_price").val( $(this).closest(".line").find(".qty").val()*$(this).closest(".line").find(".value").val() );
    $(this).closest(".line").find(".total_price").val( $(this).closest(".line").find(".tot_price").val()*1-$(this).closest(".line").find(".discount").val() );
    var sum = 0;
    $('.total_price').each(function() {
        sum += Number($(this).val());
    });
    $(".grand_total").val(sum);
  });
});

table {
    border-collapse: collapse;
}

table, tr, td {
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
  <td>Quantity</td>
  <td>Price</td>
  <td>Total Price</td>
  <td>Discount</td>
  <td>Total Price (Discount)</td>
</tr>
<tr class="line">
  <td><input type='number' class="qty" value='2'></td>
  <td><input type='number' class="value" value='20000'></td>
  <td><input type='number' class="tot_price" value='40000'></td>
  <td><input type='number' class="discount" min='0.1' step='0.1'></td>
  <td><input type='number' value='40000' class='total_price'></td>
</tr>
<tr class="line">
  <td><input type='number' class="qty" value='2'></td>
  <td><input type='number' class="value" value='20000'></td>
  <td><input type='number' class="tot_price" value='40000'></td>
  <td><input type='number' class="discount" min='0.1' step='0.1'></td>
  <td><input type='number' value='40000' class='total_price'></td>
</tr>
<tr class="line">
  <td><input type='number' class="qty" value='2'></td>
  <td><input type='number' class="value" value='20000'></td>
  <td><input type='number' class="tot_price" value='40000'></td>
  <td><input type='number' class="discount" min='0.1' step='0.1'></td>
  <td><input type='number' value='40000' class='total_price'></td>
</tr>
<tr class="line">
  <td><input type='number' class="qty" value='2'></td>
  <td><input type='number' class="value" value='20000'></td>
  <td><input type='number' class="tot_price" value='40000'></td>
  <td><input type='number' class="discount" min='0.1' step='0.1'></td>
  <td><input type='number' value='40000' class='total_price'></td>
</tr>
</tbody>
<tfoot>
  <tr>
    <td colspan='4' style='text-align:right;'>Total Payment</td>
    <td><input type='number' class="grand_total"></td>
  </tr>
</tfoot>
</table>

关键部分：

每行都有类“行”，以便在您进行数学运算时停止查找
每个输入都有一个类，具体取决于它是什么，而不是id。
处理程序基本上执行：
1. 检查您触发“keyup”的位置
2. 查看“行”，然后查看“tot_price”
3. 将该值更改为该“line”的“value”*“qty”
4. 查看“行”，然后查看“total_price”
5. 将该值更改为该“line”的“tot_price”* 1-“discount”
6. 最后用所有“total_price”s

如何使用onchange javascript对循环内的值求和

2 个答案: