Actually, You just find out exactly each element that you need to get the value.
Check my demo below to have better understand.
$("#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>
you dont need to iterate on every TR element
$(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>
I want to calculate specific td and display in the other td. However, it only shows NaN… can someone help to fix it?
<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);
});
});
});
the another tr showing this NaN. No need to iterate the tr. Or You can do the same by using sibling of the td in same tr
