代码之家 › 专栏 › 技术社区 › Joao Victor Souza

基于输入值的jQuery重复动作

jquery

Joao Victor Souza · 技术社区 · 7 年前

在插入两个值之后,我需要将信息追加到表中。所以假设价格是500,分期付款是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”。我想我需要一个不同的方法来解决这个问题。

任何帮助都很好

1 回复 | 直到 7 年前

Tyler Roper 7 年前

你很接近,但我相信你遗漏的关键因素是某种循环。你需要追加 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>