使用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{
        ...
        }
        ...
        }
    }
 });