javascript - Jquery计算所有文本框的总和(加减)

Question

您好，我正在尝试计算按键时一行中多个字段的总和(我的代码将包含多行)(其中一些使用加法，一些使用减法)但由于我是新手，我对 JQuery 不太熟悉。在我的场景中，B.Salary、Rec.comm、Sal.comm 将添加到总计字段 中，预付款、扣除 字段将从 中减去>总计字段和调整字段如果包含正值则采用加法，如果包含负值则采用减法。我尽力找出一些相关的场景但没有成功。

这是我的 HTML

<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="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="form-control input-sm" value="52385" name="txttotal1" type="text"></div>
    </div>

    <div class="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="form-control input-sm" value="10000" name="txttotal2" type="text"></div>
    </div>

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

这是我的 JS

$(document).ready(function(){
$("[input[name^=txt]").keyup(function(){
calcPullTotal();
console.log(calcPullTotal);
); 
function calcPullTotal() {
        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^=txtAdjustment]').val(total_sum);
}

});

Answer 1

通过 id 添加和删除 div 的示例(jquery)

$( '#add' ).click(function() {
    var n = 0;
    n = $( "div" ).length;
    if(n!=1){
      n = n-2;
    }
    n = n+1;
    var div_id = "div_"+n;
    $( document.body ).append( $( '<div id = "'+ div_id+ '">' ));
    $( "#count" ).val("There are " + n + " divs.");
  })
  // Trigger the click to start
  //.trigger( "click" );
 $( '#remove' ).click(function() {
    var n = 0;
    n = $( "div" ).length;
    if(n!=1){
      n = n-2;
    }
    var div_id = "div_"+n;
    $( "#"+div_id ).remove( );
    if(n!=0){
      n = n-1;
    }
    $( "#count" ).val("There are " + n + " divs.");
  })

body {
    cursor: pointer;
  }
  div {
    width: 50px;
    height: 30px;
    margin: 5px;
    float: left;
    background: blue;
  }
  span {
    color: red;
  }

<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Create and remove divs by id </p>
<input id = "count" type = "text" val = "0">
<button id = "remove" >Remove</button>
<button id = "add" >Add</button>
<br> </br>

添加带有 id 的 div:

$( document.body ).append( $( '<div id = "'+ div_id+ '">' ));

删除带有 id 的 div:

$( "#"+div_id ).remove( );

计算 div 数量:

n = $( "div" ).length;

对于特定类型的类:

var numItems = $('.clas').length;