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（jquery）

添加和删除div

Gemfile.lock

$( '#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;
  }

添加id为

的div

<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+ '">' ));

计算div的数量：

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

对于特定类型的课程：

n = $( "div" ).length;

Jquery计算所有文本框的总和（加法和减法）

1 个答案: