根据价格将全部钱划分为分数并显示余额jquery

Question

＆＃13;

＆＃13;

var paidamount = 500;
var amountpaid = 0;
var balance_amount = 0;
var list = [];
$("table tr").each(function() {
  var $this = $(this);
  var price = $this.find('td:nth-child(1)').text();

  if (paidamount >= parseFloat(price)) {
    paidamount -= parseFloat(price);
    amountpaid = price;
    balance_amount = 0;
  } else {
    amountpaid = 0;
    balance_amount = price;
  }

  list.push({
    price: price,
    paid_amount: amountpaid,
    balance: balance_amount
  });

});


for (var i = 0; i < list.length; i++) {
  $("table tbody").empty();
  var tr = $('<tr/>');
  tr.append("<td width=20>" + list[i].price + "</td>");
  tr.append("<td width=140 >" + list[i].paid_amount + "</td>");
  tr.append("<td width=140 >" + list[i].balance + "</td>");
  $("table tbody").append(tr);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td width="40" class="">300.00</td>
  </tr>
  <tr>
    <td width="40" class="">190.00</td>
  </tr>
  <tr>
    <td width="40" class="">150.00</td>
  </tr>
  <tr>
    <td width="40" class="">150.00</td>
  </tr>
  <tr>
    <td width="40" class="">150.00</td>
  </tr>
  <tr>
    <td width="40" class="">150.00</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

一开始我有500作为起始价格，然后我想在每个tr上分发它，直到它降到零。

预期：

第一行第一列是价格300然后第二列应该是300，因为500足以支付300然后余额为0，因为300是全额支付。下一行是190的价格然后第二行应该是190因为200足以支付190然后余额是零，因为190是全额支付。下一行150秒第二行是10，因为10是前一个交易剩下的，然后最后一列是140，因为150没有完全支付，只有10支付。因剩余现金为0，休息将具有价格余额然后未支付金额。

Answer 1

我已更新您的代码以解决问题。其中一个修复是从for循环中删除$("table tbody").empty();语句，您只需要运行一次。如果将它保留在for循环中，它将在每次迭代后清空表，并且只会追加最后一行。

其次，我简化了$("table tr").each()函数中的逻辑。您应该将特定行的本地变量移动到此函数内部，逻辑上它更有意义，因此您不必在每次迭代后重置它。逻辑很简单，您将tempAmount设置为等于startingAmount（500）减去行的价格。然后将amountPaid设置为price，balanceAmount等于0。假设他们已经全额付清。然后检查tempAmount是否仍然大于0，如果是，则正确全额付款，否则您没有足够的付款。在这种情况下，只需将amountPaid更新为等于剩余金额（此时为startingAmount），并将balanceAmount更新为等于price减去startingAmount 。最后将startingAmount设置为0，以便将来的所有迭代都会导致else语句运行。

var startingAmount = 500;
var list = [];
$("table tr").each(function() {
  var $this = $(this);
  var price = parseFloat($this.find('td:nth-child(1)').text());
  var tempAmount = startingAmount - price;
  var amountPaid = price;
  var balanceAmount = 0;
  if(tempAmount > 0){
     startingAmount = tempAmount;
  }else{
     amountPaid = startingAmount;
     balanceAmount = price - startingAmount;
     startingAmount = 0;
  }

  list.push({
    price: price,
    paid_amount: amountPaid,
    balance: balanceAmount
  });

});

$("table tbody").empty();
for (var i = 0; i < list.length; i++) {
  var tr = $('<tr/>');
  tr.append("<td width=20>" + list[i].price + "</td>");
  tr.append("<td width=140 >" + list[i].paid_amount + "</td>");
  tr.append("<td width=140 >" + list[i].balance + "</td>");
  $("table tbody").append(tr);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td width="40" class="">300.00</td>
  </tr>
  <tr>
    <td width="40" class="">190.00</td>
  </tr>
  <tr>
    <td width="40" class="">150.00</td>
  </tr>
  <tr>
    <td width="40" class="">150.00</td>
  </tr>
  <tr>
    <td width="40" class="">150.00</td>
  </tr>
  <tr>
    <td width="40" class="">150.00</td>
  </tr>
</table>