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

Question

how do i sum values inside loop using javascript onchange / onkeyup ?我如何使用 javascript onchange / onkeyup 对循环内的值求和？ i put each of them, numbered id based on the loop...我把它们中的每一个都根据循环编号编号...

here is my code example这是我的代码示例

<?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'>

and here is my javascript这是我的 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);
}

when i change the value of discount,it sum all of total_price field into total_payment.当我更改折扣的值时，它会将所有 total_price 字段汇总到 total_payment 中。
how to do that ?怎么做？ i already set some form to show the example我已经设置了一些表格来展示这个例子
JSFIDDLE: https://jsfiddle.net/20gb8n1g/ JSFIDDLE： https ://jsfiddle.net/20gb8n1g/

Answer 1

I got it to work on my local machine by taking what you had on your JsFiddle and modifying one of the parseFloat() calls, which you incorrectley called using a capital L like this: parseFLoat() . 我通过使用您在JsFiddle上拥有的内容并修改其中一个parseFloat()调用来使它在我的本地计算机上工作，您使用不正确的大写parseFLoat() L调用了parseFloat() ，例如： parseFLoat() 。 This should do the trick for you. 这应该为您解决问题。

Note: Be certain that your path you to your index.js(or whatever file your JavaScript is in) is correct within your <head> tag. 注意：确保<head>标记内的index.js（或JavaScript所在文件）的路径正确。

HTML: 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: 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

Attaching on keyup handlers on every input and then doing the math should work in a "in real time" fashion 在每个输入上附加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>

Key parts: 关键部分：

Every row has the class "line" to stop looking up when you're doing the math 每行都有一个“线”类，可以在您进行数学运算时停止查找
Every input has a class depending on what it is, instead of an id. 每个输入都有一个取决于其内容的类，而不是id。
The handler basically does: 处理程序基本上会执行以下操作：
1. check where you triggered "keyup" 检查您在哪里触发了“按键”
2. Look up to the "line" and then down to the "tot_price" 向上查找“行”，然后向下查找“ tot_price”
3. Change that value to the "value" * "qty" of that "line" 将该值更改为该“行”的“值” *“数量”
4. Look up to the "line" and then down to the "total_price" 查找“行”，然后查找“ total_price”
5. Change that value to the "tot_price" * 1- "discount" of that "line" 将该值更改为该“行”的“ tot_price” * 1-“折扣”
6. Finally update "grand_total" with the sum of all those "total_price"s 最后，使用所有这些“ total_price”的总和更新“ grand_total”

Answer 3

i cant output the total amount of price.我无法输出价格的总金额。 here is my code.这是我的代码。

HTML. 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>

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

问题描述

3 个解决方案

解决方案1
0 2017-10-04 19:53:18

解决方案2
0 已采纳 2017-10-04 20:02:26

解决方案3
0 2021-10-25 07:48:30

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

问题描述

3 个解决方案

解决方案1 0 2017-10-04 19:53:18

解决方案2 0 已采纳 2017-10-04 20:02:26

解决方案3 0 2021-10-25 07:48:30

解决方案1
0 2017-10-04 19:53:18

解决方案2
0 已采纳 2017-10-04 20:02:26

解决方案3
0 2021-10-25 07:48:30