Question

当我试图在每个输入类型中放置一个值jQuery函数时，它可以正常工作，但是在第二行输入的第二行值中，答案出现在第一行中。我如何分开另一行的答案？

**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

如何使用基于PHP行的jQuery自动计算？

1 个答案: