jQuery計算所有文本框的總數（加法和減法）

Question

您好，我正在嘗試在按鍵上計算一行中多個字段的總數（ 我的代碼將包含多行 ）（其中一些使用加法，一些使用減法），但由於我是新手，所以我並不過分JQuery熟悉。 在我的場景B.Salary，Rec.comm，Sal.comm將添加到總計字段中並且在Advance中，扣除字段將從總計字段中減去，如果調整字段包含正值，則調整字段將使用加法，如果包含負值，則調整字段將使用減法。 我盡力找出一些相關情況，但沒有成功。

這是我的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;