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

基于输入值的jQuery重复动作

jquery

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

在插入两个值之后,我需要将信息追加到表中。所以假设价格是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 回复 | 直到 6 年前

Tyler Roper 6 年前

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

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前