Question

大家好我想减去相同类名的字段但我在每个答案中只得到一个值帮助我，请我是jquery的新手。

<!DOCTYPE html>
 <html lang="en">
 <table>
 <tr>
 <td><input class="col-xs-4 a2" readonly type="number" id="form-field-first" value=""></td>
<td><input class="col-xs-4 b2" type="number" id="form-field-first">
</td>
<td>
<input class="col-xs-4 c2" type="number" id="form-field-first">
</td>
</tr>
<tr>
<td><input class="col-xs-4 a2" readonly type="number" id="form-field-first"  
value=""></td>
<td><input class="col-xs-4 b2" type="number" id="form-field-first">
</td>
<td>
<input class="col-xs-4 c2" type="number" id="form-field-first">
</td>
</tr>
<tr>
<td><input class="col-xs-4 a2" readonly type="number" id="form-field-first" 
value=""></td>
<td><input class="col-xs-4 b2" type="number" id="form-field-first">
</td>
<td>
<input class="col-xs-4 c2" type="number" id="form-field-first">
</td>
</tr>

</table>

这是我的脚本代码，kindely帮助我

<script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
 $(document).ready(function() {
 $(function() {
 $(".a2, .b2").on("keydown keyup", sub);
 function sub() {
 $(".c2").val(Number($(".a2").val()) - Number($(".b2").val()));
 }
 });    

 });
 </script>

Answer 1

已更新根据您的代码，这不起作用，因为它非常复杂。为什么不尝试这样做：

<table>
 <tr>
    <td>
        <input class="col-xs-4 a2" readonly type="number" id="form-field-first" value="">
    </td>
    <td>
    <input class="col-xs-4 b2" type="number" id="form-field-first">
    </td>
    <td>
        <input class="col-xs-4 c2" type="number" id="form-field-first">
    </td>
</tr>
<tr>
    <td>
        <input class="col-xs-4 a2" readonly type="number" id="form-field-first" value="">
    </td>
    <td>
        <input class="col-xs-4 b2" type="number" id="form-field-first">
    </td>
    <td>
        <input class="col-xs-4 c2" type="number" id="form-field-first">
    </td>
</tr>
<tr>
    <td>
        <input class="col-xs-4 a2" readonly type="number" id="form-field-first"value="">
    </td>
    <td>
        <input class="col-xs-4 b2" type="number" id="form-field-first">
    </td>
    <td>
        <input class="col-xs-4 c2" type="number" id="form-field-first">
    </td>
</tr>

</table>

然后在你的script上你可以这样做：

 $(document).ready(function(){
            $(".b2").on('keypress', function(){
                var uiParent = $(this).closest('tr');

                    setTimeout(function(){
                        var b2 = uiParent.find(".b2").val();
                        var c2 = uiParent.find(".c2").val();

                        var total = b2 - c2;
                         console.log(total);

                        uiParent.find(".a2").val(total);
                    }, 2000);
            });

            $(".c2").on('keypress', function(){
                 var uiParent = $(this).closest('tr');

                    setTimeout(function(){
                        var c2 = uiParent.find(".c2").val();
                        var b2 = uiParent.find(".b2").val();

                        var total = b2 - c2;
                        console.log(total);

                        uiParent.find(".a2").val(total);
                    }, 2000);
            });
       });

我添加了setTimeout()函数，等到你输入完数字然后2秒后它会生成你的答案...然后我更新了这段代码，使它变得灵活，即使表格中有多少输入它仍然有效

希望有所帮助！

由于

Answer 2

我认为这可以满足您的需求 - 它通过识别哪些文本框属于一起来分别计算每一行。它通过使用封闭表行作为边界上下文来完成此操作，并通过其类在行中查找正确的元素。

＆＃13;

$(document).ready(function() {
  $(".a2, .b2").on("keydown keyup", function(event) {
    var tr = $(this).closest("tr"); //we will use this to restrict scope to the current table row
    tr.find(".c2").val(Number(tr.find(".a2").val()) - Number(tr.find(".b2").val()));
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Val A: <input class="col-xs-4 a2" type="number" id="form-field-first" value=""></td>
    <td>Val B: <input class="col-xs-4 b2" type="number" id="form-field-first">
    </td>
    <td>
      Result of A - B: <input class="col-xs-4 c2" type="number" id="form-field-first">
    </td>
  </tr>
  <tr>
    <td>Val A: <input class="col-xs-4 a2" type="number" id="form-field-first" value=""></td>
    <td>Val B: <input class="col-xs-4 b2" type="number" id="form-field-first">
    </td>
    <td>
      Result of A - B: <input class="col-xs-4 c2" type="number" id="form-field-first">
    </td>
  </tr>
  <tr>
    <td>Val A: <input class="col-xs-4 a2" type="number" id="form-field-first" value=""></td>
    <td>Val B: <input class="col-xs-4 b2" type="number" id="form-field-first">
    </td>
    <td>
      Result of A - B: <input class="col-xs-4 c2" type="number" id="form-field-first">
    </td>
  </tr>

</table>

＆＃13;

如何减去两个输入字段并在输入字段中获取anwser

2 个答案: