javascript - Jquery 所有字段的总和

Question

我想计算一行中所有字段的总和，它可以工作，但仅适用于第一行，并且我有多行相同字段的增量。

这是我的 fiddle : https://jsfiddle.net/udy5x1eo/

这是我的代码

$(document).ready(function() {
  $('.employee').each(function() {
    $('input[type="text"]').keyup(function() {
      var basic_salary = parseInt($('input[name^=txtMonthlyRate]').val());
      var advance_salary = parseInt($('input[name^=txtAdvance]').val());
      var recover_comm = parseInt($('input[name^=txtRecovery]').val());
      var sales_comm = parseInt($('input[name^=txtSales]').val());
      var deduction_salary = parseInt($('input[name^=txtDeduction]').val());
      var adjustment_salary = parseInt($('input[name^=txtAdjustment]').val());
      var total_sum = ((basic_salary + recover_comm + sales_comm) - (deduction_salary + advance_salary)) + adjustment_salary;
      $('input[name^=txtTotal]').val(total_sum);
    });
  });
});

Answer 1

您需要在each循环中使用this来单独获取/设置文本字段值

$(document).ready(function() {
  $('.employee').each(function() {
    var self = this;
    $('input[type="text"]', self).keyup(function() {
      var basic_salary = parseInt($('input[name^=txtMonthlyRate]', self).val());
      var advance_salary = parseInt($('input[name^=txtAdvance]', self).val());
      var recover_comm = parseInt($('input[name^=txtRecovery]', self).val());
      var sales_comm = parseInt($('input[name^=txtSales]', self).val());
      var deduction_salary = parseInt($('input[name^=txtDeduction]', self).val());
      var adjustment_salary = parseInt($('input[name^=txtAdjustment]', self).val());
      var total_sum = ((basic_salary + recover_comm + sales_comm) - (deduction_salary + advance_salary)) + adjustment_salary;
      $('input[name^=txtTotal]', self).val(total_sum);
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
  <div ng-controller="customersCrtl">
    <!-- Adjustment Code Start -->
    <!-- Heading Data Start -->
    <div class="row parts_title space_bottom" style="border-bottom:1px solid #ddd; padding-bottom:5px;">
      <div class="col-xs-1 col-md-1" style="text-align:left !important;">#</div>
      <div class="col-xs-2 col-md-2" style="text-align:left !important;">Employee#</div>
      <div class="col-xs-2 col-md-2" style="text-align:left !important;">FullName</div>
      <div class="col-xs-1 col-md-1">B.Salary</div>
      <div class="col-xs-1 col-md-1">Advance</div>
      <div class="col-xs-1 col-md-1">Rec.Comm</div>
      <div class="col-xs-1 col-md-1">Sal.Comm</div>
      <div class="col-xs-1 col-md-1">Deduction</div>
      <div class="col-xs-1 col-md-1">Adjustment</div>
      <div class="col-xs-1 col-md-1">Total</div>
    </div>
    <!-- Heading Data End -->

    <div class="employee row space_bottom">
      <div class="col-xs-1 col-md-1">
        <input name="checked1" checked="" type="checkbox">
      </div>
      <div class="col-xs-2 col-md-2">E17-00001</div>
      <div class="col-xs-2 col-md-2">Employee Name 1</div>
      <div class="col-xs-1 col-md-1">
        <input class="form-control input-sm" value="50000" name="txtMonthlyRate1" type="text">
      </div>
      <div class="col-xs-1 col-md-1">
        <input class="form-control input-sm" value="0" name="txtAdvance1" type="text">
      </div>
      <div class="col-xs-1 col-md-1">
        <input class="form-control input-sm" value="35" name="txtRecovery1" type="text">
      </div>
      <div class="col-xs-1 col-md-1">
        <input class="form-control input-sm" value="2350" name="txtSales1" type="text">
      </div>
      <div class="col-xs-1 col-md-1">
        <input class="form-control input-sm" value="0.00" name="txtDeduction1" type="text">
      </div>
      <div class="col-xs-1 col-md-1">
        <input class="form-control input-sm" value="0.00" name="txtAdjustment1" type="text">
      </div>
      <div class="col-xs-1 col-md-1">
        <input class="sumtotal form-control input-sm" value="52385" name="txtTotal1" id="sumtotal" type="text">
      </div>
    </div>

    <div class="employee row space_bottom">
      <div class="col-xs-1 col-md-1">
        <input name="checked2" checked="" type="checkbox">
      </div>
      <div class="col-xs-2 col-md-2">E17-00002</div>
      <div class="col-xs-2 col-md-2">Employee Name 2</div>
      <div class="col-xs-1 col-md-1">
        <input class="form-control input-sm" value="10000" name="txtMonthlyRate2" type="text">
      </div>
      <div class="col-xs-1 col-md-1">
        <input class="form-control input-sm" value="0" name="txtAdvance2" type="text">
      </div>
      <div class="col-xs-1 col-md-1">
        <input class="form-control input-sm" value="0" name="txtRecovery2" type="text">
      </div>
      <div class="col-xs-1 col-md-1">
        <input class="form-control input-sm" value="0" name="txtSales2" type="text">
      </div>
      <div class="col-xs-1 col-md-1">
        <input class="form-control input-sm" value="0.00" name="txtDeduction2" type="text">
      </div>
      <div class="col-xs-1 col-md-1">
        <input class="form-control input-sm" value="0.00" name="txtAdjustment2" type="text">
      </div>
      <div class="col-xs-1 col-md-1">
        <input class="sumtotal form-control input-sm" value="10000" name="txtTotal2" id="sumtotal" type="text">
      </div>
    </div>

    <!-- Adjustment Code End -->
  </div>
</div>