Question

我有一个页面，其中包含一个总金额输入字段和一个HTML表格，其中行显示项目金额（来自数据库）和一个输入字段（从总金额中自动填充拆分金额，并允许用户输入））。我的要求是，当用户输入总金额时，它应根据其项目金额（从数据库预先填充的项目金额列）分成表格中的输入框（应用金额列）

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>

现在假设我调整了第二行'applied-amount'输入值，它应该重新计算并在其他行中分配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{
        ...
        }
        ...
        }
    }
 });

使用jQuery基于总量动态重新计算输入字段值

3 个答案: