JavaScript 计算字段

Question

我只是看不出我做错了什么......它不计算“震惊”领域。

我这边出了点小错误，我就是看不出来。

已编辑：现在一切正常

$(document).ready(function(){
  $('.item').keyup(function(){

    var starts = 0;
    var ends = 0;
    var stunden = 0;

    if (!isNaN($(this).find(".starts").val())) {
      starts = $(this).find(".starts").val();
    }
    if (!isNaN($(this).find(".ends").val())) {
      ends = $(this).find(".ends").val();
    }

    stunden = ends - starts;
    $(this).find(".stunden").val(stunden);

  });    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <table id="t1" class="table table-hover">
    <tr>
      <th class="text-center">Start Time</th>
      <th class="text-center">End Time</th>
      <th class="text-center">Stunden</th>
    </tr>
    <tr id="row1" class="item">
      <td><input name="starts[]" class="starts form-control" ></td>
      <td><input name="ends[]" class="ends form-control" ></td>
      <td><input name="stunden[]" class="stunden form-control" readonly="readonly" ></td>
    </tr>
    <tr id="row2" class="item">
      <td><input name="starts[]" class="starts form-control" ></td>
      <td><input name="ends[]" class="ends form-control" ></td>
      <td><input name="stunden[]" class="stunden form-control" readonly="readonly" ></td>
    </tr>
  </table>
</div>

Answer 1

问题在于，当在.stunden 字段中按下某个键时，您正在重新计算，因此您应该将事件移至其他输入或父行。你需要这样的东西。

$('.item').keyup(function(){
  var starts = 0;
  var ends = 0;
  var stunden = 0;
  if (!isNaN($(this).find(".starts").val())) {
    starts = $(this).find(".starts").val();
  }
  if (!isNaN($(this).find(".ends").val())) {
    ends = $(this).find(".ends").val();
  }
  stunden = starts - ends;
  $(this).find(".stunden").val(stunden);
});

Answer 2

让我试试你原来的keyup代码.ends，我只是想解释一下代码下面的工作原理

• 调用.starts，我们目前在tr>td>input，所以需要通过parent()备份到tr，然后我们在其元素中找到.starts。还有.ends

• find .studen 也处于状态 tr>td>input ，所以备份到 td 并通过 next() 转到下一个 td 然后找到 .studen 。

  $(document).ready(function(){
      $('.ends').keyup(function(){
              var starts = 0;
              var ends = 0;
              var stunden = 0;            
              if (!isNaN($(this).parent().parent().find(".starts").val())) {
                  starts = $(this).parent().parent().find(".starts").val();
              }
              if (!isNaN($(this).parent().parent().find(".ends").val())) {
                  ends = $(this).parent().parent().find(".ends").val();
              }            
              stunden = starts - ends;
              $(this).parent().next().find('.stunden').val(stunden);
  
      });    
  });