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

Posted 2023-02-24

技术标签:

【中文标题】如何使用 onchange javascript 对循环内的值求和【英文标题】：How to sum values inside loop using onchange javascript 【发布时间】：2018-03-16 07:17:17 【问题描述】：

如何使用 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/

【问题讨论】：

【参考方案1】：

我无法输出总价格。这是我的代码。

html。

<?php foreach($result as $row): ?>
                <!-- <td><input type="hidden" name="material_id[]" value="<?= $order_no = generate_random(5); ?>"> 
                </th> -->
                <td><input type="hidden" name="material_id[]" value="<?= encode($row->material_id); ?>"> 
                    <?= $row->material_id; ?></td>
                <td><input type="hidden"  name="" value="<?= $row->material_name; ?>">
                    <?= $row->material_name; ?></td>
                <td><input type="hidden" id="price'<?= $no;?>'"  name="material_price[]" value="<?= $row->material_price; ?>">
                    <?= $row->material_price; ?></td>
                <td <?php if($row->material_status == 'Inactive')
                        echo 'class="text-danger"';
                    else
                        echo 'class="text-success"';
                     ?> >
                    <?= $row->material_status; ?>   
                </td>
                <div class="form-group">
                    <td>

                       <input type="number" onkeyup="autosum(<?= $no;?>)"  id="qty'<?= $no;?>" value=""  name="material_qty[]" class="form-control"     style="width:80px;height: 30px;"/>

                    </td>
                </div>
                <div class="form-group">
                    <td>
                       <input type="text" readonly id="total'<?= $no;?>'"  value="" class="form-control" style="width:80px;height: 30px;"/>
                    </td>
                      
                </div>
                </tr>
                 
                <?php $no++; ?>

              
               
            <?php endforeach;?>

                <tr style='position:absolute;margin-left: 895px;margin-top:20px;'>
                    <td colspan='4' >Grand Total :</td>
                    <td><input type='number' id="grandtotal"  class="form-control" readonly   style="width: 80px;"></td>
                </tr> 
           
            <input type="hidden" name="order_no" value="<?= $order_no = generate_random(5); ?>"  style="width:50px;height: 30px;">
            <input type="hidden" name="order_id" value="<?= $order_id =generate_random(5); ?>"  style="width:50px;height: 30px;">
            </tbody>
            </table>
            <br>
            <br>
            <br>

            <a href="order_details"><button type="button" class="fadeIn second btn btn-secondary" style="margin-left:890px;margin-top:50px;">CANCEL</button></a>
            <button type="submit" class="fadeIn second btn btn-danger" style="margin-left:1000px;margin-top:-50px;background-color: red;">ORDER</button>
           

        </form>

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。【参考方案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。

处理程序基本上是这样做的：

检查您触发“keyup”的位置向上查找“line”，然后向下查找“tot_price” 将该值更改为该“行”的“值”*“数量” 向上查找“行”，然后向下查找“total_price” 将该值更改为该“行”的“tot_price”* 1-“折扣” 最后用所有“total_price”的总和更新“grand_total”

【讨论】：

【参考方案3】：

通过获取您在 JsFiddle 上的内容并修改其中一个 parseFloat() 调用，我让它在我的本地机器上工作，您错误地使用大写 L 调用它：parseFLoat()。这应该可以为您解决问题。

注意：请确保您的 index.js（或您的 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);

【讨论】：

jsfiddle 上的表格只是我的表格的示例。真正的表格使用 php 和 javascript...

以上是关于如何使用 onchange javascript 对循环内的值求和的主要内容，如果未能解决你的问题，请参考以下文章

如何使用带有select onchange的条件语句在javascript函数中返回html代码

如何确保使用javascript更新select也会触发onchange事件侦听器？

Javascript：如何让单选按钮的“onchange”事件通过外部函数触发？

如何使用第一个下拉列表的 onChange 事件填充另一个下拉列表？

JavaScript 使用jQuery OnChange OnFocus文本输入

javascript onchange onChange OnChange选择