如何根据单击按钮将每行总和加两个？

如何解决如何根据单击按钮将每行总和加两个？

因此，我尝试根据是否单击按钮来在每行总和中添加两个。

HTML：

<table>
<tr>
<td>
<input type="checkBox" class="prof" name="prof" value="0">
<input class="mod" name="mod" type="text" value='2'>
<input class="savings" name="savings" type="text">
</td>
</tr>
<tr>
<td>
<input type="checkBox" class="prof" name="prof" value="0">
<input class="mod" name="mod" type="text" value='4'>
<input class="savings" name="savings" type="text">
</td>
</tr>
</table>

jquery：

//when document is ready,have numbers appear in each '.savings'
$(document).ready(function() {
//on button click,change the number depending on if checked or not
  $('input[type="checkBox"]').click(function() {
    if ($('input[type="checkBox"]').prop("checked") == true) {
      $('tr').each(function() {
        var sum = 2
        $(this).find('.mod').each(function() {
          var mod = $(this).val();
          if (!isNaN(mod) && mod.length !== 0) {
            sum += parseFloat(mod);
          }
        });
        $('.savings',this).val(sum);
      })
    } else {
      $('tr').each(function() {
        var sum = 0
        $(this).find('.mod').each(function() {
          var mod = $(this).val();
          if (!isNaN(mod) && mod.length !== 0) {
            sum += parseFloat(mod);
          }
        });
        $('.savings',this).val(sum);
      })
    }
  })
});

我的问题是，单击按钮会向每行添加两个，而不是它所在的行。 任何帮助将不胜感激。

JSfiddle：https://jsfiddle.net/sheepishlamb/3p9gary8/

解决方法

所以我能看到的主要问题是您正在将函数应用于所有复选框。

点击功能中的

this将引用您所单击的复选框。

您只需要查看相对于复选框的mod和savings元素，因此搜索您需要复选框的父元素的元素。

$(document).ready(function() {
//on button click,change the number depending on if checked or not
  $('input[type="checkbox"]').click(function() {
    if ($(this).prop("checked") == true) {
        var sum = 2
        $(this.parentElement).find('.mod').each(function() {
          var mod = $(this).val();
          if (!isNaN(mod) && mod.length !== 0) {
            sum += parseFloat(mod);
          }
        });
        $('.savings',this.parentElement).val(sum);
    } else {
        var sum = 0
        $(this.parentElement).find('.mod').each(function() {
          var mod = $(this).val();
          if (!isNaN(mod) && mod.length !== 0) {
            sum += parseFloat(mod);
          }
        });
        $('.savings',this.parentElement).val(sum);
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="checkbox" class="prof" name="prof" value="0">
<input class="mod" name="mod" type="text" value='2'>
<input class="savings" name="savings" type="text">
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="prof" name="prof" value="0">
<input class="mod" name="mod" type="text" value='4'>
<input class="savings" name="savings" type="text">
</td>
</tr>
</table>

,

您可以尝试以下方法：

$('input[type="checkbox"]').click(function() {
  var mod = $(this).next('.mod').val();
  var sum = ($(this).is(":checked")) ? 2 : 0;
  if (!isNaN(mod) && mod.length !== 0) {
    sum += parseFloat(mod);
  }
  $(this).siblings('.savings').val(sum);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="checkbox" class="prof" name="prof" value="0">
      <input class="mod" name="mod" type="text" value='2'>
      <input class="savings" name="savings" type="text">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="prof" name="prof" value="0">
      <input class="mod" name="mod" type="text" value='4'>
      <input class="savings" name="savings" type="text">
    </td>
  </tr>
</table>