使用jQuery基於總數動態地重新計算輸入字段值

Question

我有一個頁面，該頁面具有“總金額”輸入字段和一個HTML表，其中的行具有顯示項目數量（來自db）的列以及針對該字段的輸入字段（自動從“總金額”填充拆分的amt，還允許用戶輸入）。 我的要求是，當用戶輸入總金額時，應根據他們的項目金額（從db中預先填充的“項目金額”列）將其分成表格中的輸入框（“應用金額”列）

Eg: Input Amount:100

Item Amount | Applied amount(input box)
25              25
100             75
50              0

---

我可以通過以下方式實現這一目標：

var oidata = [];
var poidata = "", poibalance = "";
function applyAmount() {
oidata = [];
poidata = "", poibalance = "";
var total = parseFloat(document.getElementById("total-amount").value);
if(total>0){
    $('#ao_amt_tbl tbody tr td[data-value]').each(function() {
    var dataValue =  this.getAttribute("data-value");
    var dataId =  this.getAttribute("data-id");
    var $row = $(this).closest("tr");
    var priceAmt = 0;
    if(dataValue > 0){
        if(total > dataValue || 
            total == dataValue){
                total = total - dataValue;
                $row.find('.applied').val(dataValue);
                $row.find('.balance').val('0.00');
                oidata.push(dataId);
               }
               else{                            
                priceAmt = dataValue - total;
                $row.find('.applied').val(total.toFixed(2));
                $row.find('.balance').val(priceAmt.toFixed(2));
                if(total>0){
                    poibalance=priceAmt;
                    poidata=dataId;
                    oidata.push(dataId);
                }
                total=0;                                                        
                }
              }                 
            });
    if(total>0)
            alert('$' + total.toFixed(2) + ' remaining.');
}

HTML是-

    <table id='ao_amt_tbl'>
    <thead>
    <tr>
    <th>Amount</th><th>Amount Applied</th><th>Balance</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td data-id="19185" data-value="25">$25</td>
    <td class="ao_td_jn"><input type="text" name="applied-amount" id="total1" placeholder="0.00" class="applied"></td>
    <td><input type="text" name="balance-amount" id="balance1" placeholder="0.00" class="balance"></td>
    </tr>
    <tr>
    <td data-id="19186" data-value="100">$100</td>
    <td class="ao_td_jn"><input type="text" name="applied-amount" id="total2" placeholder="0.00" class="applied"></td>
    <td><input type="text" name="balance-amount" id="balance2" placeholder="0.00" class="balance"></td>
    </tr>
    <tr>
    <td data-id="19186" data-value="50">$50</td>
    <td class="ao_td_jn"><input type="text" name="applied-amount" id="total2" placeholder="0.00" class="applied"></td>
    <td><input type="text" name="balance-amount" id="balance2" placeholder="0.00" class="balance"></td>
    </tr>
    </tbody>

現在假設我調整了第二行“應用金額”輸入值，它應該重新計算並在其他行中分配100美元。 例如，將第二個輸入值更改為50，它應該重新計算並將值分配為25、50、25。然后將余額字段重新計算為0、50、25。

使用上面的例子； 如果輸入金額為100，則系統應基於輸入金額（100）的余額重新計算其余的“應用金額”輸入值。

Item Amount | Applied amount(input box)
25              25
100             50  <-- user input
50              25  <-- script needs to automatically recalculate and change the rest of the Applied amount input with balance amount (100 - 75 = 25).

基本上，腳本需要遍歷“應用量”輸入框，並從上到下拆分輸入量（100），直到輸入量為0。希望我對我的要求很清楚。 任何幫助將不勝感激。 謝謝

Answer 1

采用

$(document).ready(function () {
$('input').keydown(function () {
    applyAmount();
});

}）;

Answer 2

你也可以使用

onkeydown=applyAmount();

在您想要的任何輸入標簽的標簽內。

Answer 3

謝謝大家。我得到了解決方案。 做了這樣的事情；

 $(function (){
$("input[id*='total-']").on('keyup', function() {       
    var ttl = //get Input Amount
    var gid = $(this).parents('tr').find('.ao_td_jn').attr('data-id');
    var Ajt = this.value;
    ttl = ttl - Ajt;
    if(ttl>0){
        $('#ao_amt_tbl tr td[data-value]').each(function() {
        var dv =  this.getAttribute("data-value");
        var dataId =  this.getAttribute("data-id");
        var $row = $(this).closest("tr");           
        if(gid == dataId){
        var balAmt = dv - Ajt;
        $row.find('.balance').val(balAmt.toFixed(2));
        }
        else{
        ...
        }
        ...
        }
    }
 });