如何使用onchange在循環內求和值javascript

如何使用javascript onchange/onkeyup在循環內求和值？我把他們每個人的基礎上，環編號爲ID ...如何使用onchange在循環內求和值javascript

這裏是我的代碼示例

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

來源

2017-10-04 Bakti Wijaya

附加上KEYUP處理器在每個輸入，然後做數學應以「實時」的方式工作

$(document).ready(function() { 
 
    $("body").on("keyup", "input", function(event){ 
 
\t $(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. 更改該值的「值行‘是的‘「*’數量’
4. 查找到‘行’，然後下到‘TOTAL_PRICE’
5. 更改該值以‘tot_price’* 1‘線’是的‘打折’
6. 最後更新「grand_total」與所有這些「TOTAL_PRICE」的和S

來源

2017-10-04 20:02:26 LordNeo

我把它通過採取你對你的jsfiddle什麼，修改parseFloat()呼叫中的一個，你incorrectley利用資本打電話給我的本地機器上工作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); 

}

來源

2017-10-04 19:53:18

上的jsfiddle形式是什麼我的表看起來使用PHP和JavaScript like.the實際只是一個例子... –

回答

相關問題