Как заполнить поля ввода с помощью jQuery

Question

Ниже приведен снимок экрана моей системы, который позволяет мне записывать платежи по счетам-фактурам (счета-фактуры называются арендодателями в моей системе).

У меня есть вход с меткой «Общая сумма, выплачиваемая» с помощью кнопки рядом с ним с надписью «Распределить». Когда я нажимаю эту кнопку, я хочу, чтобы входы «Полученные суммы» заполнялись автоматически, начиная с первого до последнего. Например, если я ввел «200» в вход «Всего поступивших сумм» и нажал «Выделить», он заполнил первое поле «Полученное количество» «189,59», а второе - «10 .41».

HTML;

<fieldset> 
    <legend>Outstanding Tenant Charge Details</legend> 
<div style="padding:5px;"><label for="total_amount_paid">Total Amount Paid (&pound;):</label> 
    <input type="number" id="total_amount_paid" value="0.00">&nbsp;<button type="button" id="allocate_total_amount_paid">Allocate</button></div> 
<table class="solid" style="margin:5px;"><tr> 
     <th>Tenant Charge #</th> 
     <th>Date</th> 
     <th>Due Date</th> 
     <th>Charge Total</th> 
     <th>Amount Paid</th> 
     <th>Amount Due</th> 
     <th>Amount Received (&pound;)</th><th>Management Fee at 7.00%</th></tr><tr> 
     <td><a href="view_tenant_charge.php?tenant_charge_id=217" target="_blank">217</a></td> 
     <td>09/11/15</td> 
     <td>09/12/15</td> 
     <td>&pound;250.00</td> 
     <td>&pound;60.41</td> 
     <td>&pound;189.59 
     <input type="hidden" name="amount_outstanding[]" value="189.59"> 
     </td> 
     <td> 
     <input type="number" name="amount_received[]" class="amount_received" value="0.00" max="189.59" required>&nbsp;<button class="pay_in_full" type="button">Pay in Full</button> 
     <input type="hidden" name="tenant_charge_id[]" value="217"> 
     <input type="hidden" name="tenant_charge_tenancy_id[]" value="69"></td><td><input type="checkbox" name="management_fee_invoice[]" value="1"checked="checked"> <label>Generate &amp; Post Invoice</label></td></tr><tr> 
     <td><a href="view_tenant_charge.php?tenant_charge_id=283" target="_blank">283</a></td> 
     <td>09/12/15</td> 
     <td>09/01/16</td> 
     <td>&pound;250.00</td> 
     <td>&pound;0.00</td> 
     <td>&pound;250.00 
     <input type="hidden" name="amount_outstanding[]" value="250.00"> 
     </td> 
     <td> 
     <input type="number" name="amount_received[]" class="amount_received" value="0.00" max="250.00" required>&nbsp;<button class="pay_in_full" type="button">Pay in Full</button> 
     <input type="hidden" name="tenant_charge_id[]" value="283"> 
     <input type="hidden" name="tenant_charge_tenancy_id[]" value="69"></td><td><input type="checkbox" name="management_fee_invoice[]" value="1"checked="checked"> <label>Generate &amp; Post Invoice</label></td></tr></table></fieldset> 

jQuery;

// allocate button 

$("#allocate_total_amount_paid").click(function() { 

var totalAmountPaid = $("#total_amount_paid").val(); 

$(".amount_received").each(function(index) { 
    //console.log(index + ": " + $(this).text()); 
    alert(index + totalAmountPaid); 
}); 

}); 

Answer 1

В вашем цикле, получить сумму от предыдущей колонки, и вычесть его из общей суммы.

$("#allocate_total_amount_paid").click(function() { 
    var totalAmountPaid = parseFloat($("#total_amount_paid").val()); 
    $(".amount_received").each(function(index) { 
     var thisAmount = parseFloat($(this).closest("td").prev("td").find("input[name^=amount_outstanding]").val()); 
     if (thisAmount <= totalAmountPaid) { 
      // If we have enough for this payment, pay it in full 
      $(this).val(thisAmount); 
      // and then subtract from the total payment 
      totalAmountPaid -= thisAmount; 
     } else { 
      // We don't have enough, so just pay what we have available 
      $(this).val(totalAmountPaid); 
      // Now we have nothing left, use 0 for remaining rows 
      totalAmountPaid = 0; 
     } 
    }); 

}); 

Answer 2

Сначала я структурировать таблицу в thead и tbody для более эффективного зацикливания, и добавить имя отличительного класса к нему, и добавить скрытый вход с причитающейся суммой в каждую строку. Вот основной пример.

var sum = parseFloat($('#total_amount_paid').val()); 
 
$('.tenants tbody tr').each(function() { 
 
    var due = parseFloat($('.amount_due', this).val()); 
 
    var amount = (sum >= due) ? due : sum; 
 
    $('.amount_received', this).val(amount); 
 
    sum -= amount; 
 
});

<table class="tenants"> 
 
    <thead> 
 
    <tr> 
 
     <th>...</th> 
 
     <th>Amount due</th> 
 
     <th>Amount received</th> 
 
     <th>...</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>...</td> 
 
     <td> 
 
     &pound;123.45 
 
     <input type="hidden" class="amount_due" value="123.45" /> 
 
     </td> 
 
     <td> 
 
     <input class="amount_received" /> 
 
     </td> 
 
     <td>...</td> 
 
    </tr> 
 
    ... 
 
    </tbody> 
 
</table>