如何使用jquery計算動態列的總和

Question

我已經使用jQuery創建了一個錶行，列ID是已選擇的數據的ID。我如何計算ID是動態（基於數據ID）的'total_price'列的總和？

這裏我jQuery腳本

function getCorporateService(id){ 
    //get data and parsing to column 
    $.get("{{ url('salesorder/service')}}/"+id, function(data){ 
     console.log(id); 
     console.log(data); 
     $.each(data, function (index, element){ 

      $br = "<tr id='item'>"; 
      $br += "<td> <input class='input-small' type='text' id='order_identifier' name='order_identifier' readonly></td>"; 
      $br += "<td><input class='input-small' type='text' id='service["+id+"]' name='service["+id+"]' value='"+element.service_name+"' readonly></td>"; 
      $br += "<td><select id='order_type["+id+"]' name='order_type["+id+"]'> <option> - </option> <option value='add'>Add</option> <option value='change'>Change</option> <option value='cancel'>Cancel</option> </select></td>"; 
      $br += "<td><input class='input-small' type='text' id='select_plan["+id+"]' name='select_plan["+id+"]'></td>"; 
      $br += "<td><input class='input-mini' type='text' id='qty["+id+"]' name='qty["+id+"]' value='1' onChange='getTotalPrice("+id+")'></td>"; 
      $br += "<td><input class='input-small' type='text' id='unit_price["+id+"]' name='unit_price["+id+"]' onChange='getTotalPrice("+id+")'></td>"; 
      $br += "<td><input class='input-small' type='text' id='total_price["+id+"]' name='total_price["+id+"]' onChange='getTotalPrice("+id+")'></td>"; 
      $br += "<td><textarea class='input-small' id='notes["+id+"]' name='notes["+id+"]'></textarea></td>"; 
      $br += "</tr>"; 

      $(".corporatesvc").append($br); 
     }); 
    }); 
} 

Answer 1

要回答你的問題不添加類的字段，使用starts with selector的getTotalPrice內

function getTotalPrice() { 
    var total = 0; 
    $("[id^='total_price']").each(function() { // or $(".total_price") if given a class 
    var val = $(this).val(); 
    total += isNaN(val) || $.trim(val)=="" ? 0 : parseFloat(val); // or parseInt(val,10); 
    }); 
    $("#total").text(total.toFixed(2)); // or (total) if an int 
} 

你應該給每個可更改的輸入一個類名並分配一個處理程序 - onkeyup例如和使用委託：

$(function() { 
    $(".corporatesvc").on("keyup",".changeable",function() { 
    if (this.id.indexOf("qty")==0) { 
     // here you can update siblings 
    } 
    getTotalPrice(); 
    }); 
}); 

Answer 2

給每個文本框的類名稱。 Check thisLinki hope it helps you. HTML

<input class='input-small total_price' type='text' id='total_price_1' name='total_price_1'> 
<input class='input-small total_price' type='text' id='total_price_2' name='total_price_2' > 
<input class='input-small total_price' type='text' id='total_price_3' name='total_price_3' > 
<p id="classname"> 

JS

$(".total_price").each(function() { 
    $(this).keyup(function() { 
    var sum = 0; 
    $(".total_price").each(function() { 
     if (!isNaN(this.value) && this.value.length != 0) { 
     sum += parseFloat(this.value); 
     } 
     $("#classname").html(sum); 
    }); 
    }); 
});