Jquery所有字段的总和

时间：2017-05-01 13:35:33

标签： javascript jquery

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

这是我的小提琴： 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);
    });
  });
});

4 个答案:

答案 0 :(得分：2)

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

$(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>

答案 1 :(得分：1)

检查此工作代码。

{{1}}

答案 2 :(得分：0)

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

答案 3 :(得分：0)

$(document).ready(function() {
  $('.employee').on('keyup', 'input[type="text"]', calculateTotal);

  function calculateTotal() {
    var input = $(this).closest('.employee').find('input[type="text"]');
    var sum = 0;
    input.slice(0, input.length - 1).each(function() {
      sum = sum + (+this.value || 0);
    });
    input.last().val(sum);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.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>

相关问题
最新问题