Question

我有两个输入：#price和#installments

在插入两个值之后，我需要将信息附加到表中。因此，可以说#price为'500'，而#installments为'5'。该表将如下所示：

(installmentNumber) / (installmentPrice)
#1                  /        100
#2                  /        100
#3                  /        100
#4                  /        100
#5                  /        100

我有以下代码

$(document).on('blur', "#installments", function(e){
       e.preventDefault();
       var numberOfInstallments = $('#installments').val();
       var installmentPrice = ($('#price').val() / $('#installments').val());
       var installmentNumber = 1;
       $('#tbody').html('');
       $('#tbody').append(new Array(++numberOfInstallments).join('<tr><td>' + installmentNumber++ + '</td><td>' + installmentPrice + '</td></tr>'));
});

但是installmentNumber ++不起作用，它在每行中给我相同的值，即'1'。我想我需要一种不同的方法。

任何帮助都会很棒

Answer 1

您非常亲密，但我认为您缺少的关键要素是某种循环。您需要追加操作numberOfInstallments次。

您可以通过简单的for循环来完成此操作：

$(document).on('blur', "#installments", function(e) {
  e.preventDefault();
  var numberOfInstallments = +$('#installments').val();
  var installmentPrice = ($('#price').val() / $('#installments').val());
  
  $("#tbody tr").remove(); //Remove all rows
  
  for (var i = 1; i <= numberOfInstallments; i++)   //Repeat {numberOfInstallments} times
    $('#tbody').append('<tr><td>' + i + '</td><td>' + installmentPrice + '</td></tr>');
});

input { display: block; }
table { margin-top: 20px; border-collapse: collapse; }
td, th { padding: 5px; border: 1px solid #ccc; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  Price: <input type="text" id="price" />
  Installments: <input type="text" id="installments" />
</div>

<table>
  <thead>
    <tr>
      <th>Installment Number</th>
      <th>Installment Price</th>
    </tr>
  </thead>
  <tbody id="tbody"></tbody>
</table>

jQuery根据输入值重复操作

1 个答案: