PHPの行でjQueryベースを使って自動的に計算するには？

Question

jQuery関数の各入力タイプに値を配置しようとすると、それは機能しますが、2番目の入力に置かれた2番目の行の値では、最初の行に回答が表示されます。別の行の答えをどのように分けることができますか？

**script** 
$('#txt3').keyup(function(){ 
    var textone; 
    var texttwo; 
    var textthree; 
    textone = parseFloat($('#txt1').val()); 
    texttwo = parseFloat($('#txt2').val()); 
    textthree = parseFloat($('#txt3').val()); 
    var result = textone + texttwo + textthree; 
    $('.result').val(result.toFixed(3)); 


}); 

私のhtml

<td class="td-encode"> <input type="text" class="td-input" id="txt1" name="txtgrade" onkeyup="sum()" maxlength="2"/></td> 
    <td class="td-encode"> <input type="text" class="td-input" id="txt2" name="txtgrade" onkeyup="sum()" maxlength="2"/></td> 
    <td class="td-encode"><input type="text" class="td-input" id="txt3" name="txtgrade" onkeyup="sum()" maxlength="2"/></td> 
     <td class="td-encode" id="result_td"> 
     <input type="text" class="result" name="total" disabled /> 
    </td> 

結果 enter image description here

Answer 1

あなたはクラスで、この交換IDを試すことができます： -

HTML

<table> 
    <tr> 
    <td class="td-encode"> <input type="text" class="td-input txt1" name="txtgrade" maxlength="2"/></td> 
    <td class="td-encode"> <input type="text" class="td-input txt2" name="txtgrade" maxlength="2"/></td> 
    <td class="td-encode"><input type="text" class="td-input txt3" name="txtgrade" maxlength="2"/></td> 
    <td class="td-encode" id="result_td"> 
     <input type="text" class="result" name="total" disabled /> 
    </td> 
    </tr> 
</table> 

JS：私たちにいくつかのコードを示すと

$(document).ready(function(){ 
    $('.txt3').keyup(function() { 
    var textone = parseFloat($(this).closest('tr').find('.txt1').val()); 
    var texttwo = parseFloat($(this).closest('tr').find('.txt2').val()); 
    var textthree = parseFloat($(this).closest('tr').find('.txt3').val()); 
    var result = textone + texttwo + textthree; 
    $(this).closest('tr').find('.result').val(result); 
    }); 
}) 

Working Demo Here