Question

我正在构建某种类型的计算器，它可以处理利率和贷款金额。我希望能够根据利率百分比比较不同的贷款统计数据。所以，如果我输入50000作为贷款金额，并希望看到基于4％利率和6％利率的一些统计数据，我会得到一个动态添加的表格，包含这些计算。

因此，用户可以输入他/她想要进行比较的多少利率，并查看贷款金额的不同统计数据（例如，还清需要多长时间）。

问题：由于用户可以输入任意数量的百分比（动态插入），因此我必须遍历每一个以计算内容。我得到了这个，但如果页面没有重新加载，并且用户点击链接添加另一个输入框来比较另一个百分比率，然后点击按钮再次计算，新的百分比率被添加到表PLUS all以前的百分比率再次增加。

我知道为什么会发生这种情况（我想这是预期的.each（）），但是如何对其进行编码以便表格只添加新单元格而不是新单元格+所有旧单元格试。

对不起，经过多长时间的解释。单击下面的链接以查看实际示例。请记住，添加一些％费率和贷款金额并单击计算，但不刷新并添加更多％费率并再次单击计算。不要担心数学或我如何获得数字。现在没关系;我只是想让初步的东西发挥作用。感谢！

http://machinesandwich.com/calc.html

Answer 1

我建议每次清理和重建表行。

从我看到的问题是你没有摆脱以前的细胞。

因此，您可以轻松地为每个输入添加新单元格，但请务必先删除以前添加的单元格。

Answer 2

不要追加，只需像这样更改HTML：

    $("div#standard table tbody th[scope=col]").html("<th>" + num + "% interest rate</th>");
 $("div#standard table tbody tr#totalMonths").html("<td>" + totalMonths + "</td>");
 $("div#standard table tbody tr#paymentPerMonth").html("<td>" + paymentPerMonth + "</td>");
});

Answer 3

这是你的jQuery代码应该是这样的：

var $table = $("div#standard table");
var col1 = $table.find('tr:first').find('th[scope="col"]');
$table.find('tr:first').html(col1+"<th>" + num + "% interest rate</th>");
var row1 = $table.find('tr#totalMonths').find('th[scope="row"]');
$table.find('tr#totalMonths').html(row1+"<td>" + totalMonths + "</td>");
var row2 = $table.find('tr#paymentPerMonth').find('th[scope="row"]');
$table.find('tr#paymentPerMonth').html(row2+"<td>" + paymentPerMonth + "</td>");

您可以随时对其进行简化，但应工作！

使用jQuery .each（）添加新元素

3 个答案: