如何使用 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>