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

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

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

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>

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. 向上查找“line”，然后向下查找“tot_price”
  3. 将该值更改为该“行”的“值”*“数量”
  4. 向上查找“行”，然后向下查找“total_price”
  5. 将该值更改为该“行”的“tot_price”* 1-“折扣”
  6. 最后用所有“total_price”的总和更新“grand_total”

Answer 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);

}