计算特定TD并显示在另一个TD中

Question

我想计算其他td中的特定td和display。但是，它只显示NaN...有人可以帮助修复它吗？

<table class="table1">
<tr>
<td class="v2">29</td>
<td>
<input id="v1" class="v1" type="text" />
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td class="result"></td>
</tr>
</table>
$(function(){
$("#v1").on("keyup", function() {
$('.table1 tr').each(function(i){
var sum = parseFloat($(this).find('.v2').text()) - parseFloat($(this).find('.v1').val());
$(this).find('.result').text(sum);
});
});
});

Answer 1

实际上，您只是准确地找出获取值所需的每个元素。

查看下面的演示以更好地了解。

$("#v1").on("keyup", function() {
var numberV2 = parseFloat($(".v2").text());
var numberV1 = parseFloat($(this).val());
$('.result').html(numberV2 - numberV1);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table1">
<tr>
<td class="v2">29</td>
<td>
<input id="v1" class="v1" type="text" />
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td class="result"></td>
</tr>
</table>

Answer 2

你不需要迭代每个TR元素

$(function(){
$("#v1").on("keyup", function() {
sum = parseFloat($('.v2').text()) - parseFloat($('.v1').val());
$('.result').text(sum);
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table1">
<tr>
<td class="v2">29</td>
<td>
<input id="v1" class="v1" type="text" />
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td class="result"></td>
</tr>
</table>