рассчитать удельный c тд и отобразить в другом тд

Question

Я хочу вычислить значения c td и display в других td. Тем не менее, он показывает только 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>