计算动态添加项目到表格的总和

我想使用itemPrice * Qty字段计算每个项目的行总数，行数量将在linePrice文本框中自动填充。 之后，通过总计所有线价，将总计自动填充到priceTotal字段。

我有一个挑战，将每个Qty和itemPrice文本框值都放入我的JavaScript函数中，因为名称是Qty0，Qty1，Qty2 …和itemPrice0，itemPrice1，..取决于添加的行，还得到了最终计算到各自的文本框中。

以下是我的代码。

function isNumberKey(evt) { var charCode = (evt.which) ? evt.which : event.keyCode if (charCode > 31 && (charCode != 46 && (charCode  57))) return false; return true; } $(document).ready(function() { $(document).on("keyup", ".Qty", calculateTot); $("button").click(function() { addrow('tb') }); }); function calculateTot() { var sum = 0; var price = document.getElementById('itemPrice').value; var qtyPur = parseFloat(this.value); $(".Qty").each(function() { if (!isNaN(this.value) && this.value.length != 0) { linePR = price * qtyPur; } }); $("#linePrice").val(linePR.toFixed(2)); calculateSum(); } function calculateSum() { var sum = 0; $(".linePrice").each(function() { if (!isNaN(this.value) && this.value.length != 0) { sum += parseFloat(this.value); } }); $("#priceTotal").val(sum.toFixed(2)); } $(document).ready(function() { var i = 1, j = 1; $("#add_row").click(function() { if (i < 10) { $('#addr' + i).html("" + (i + 1) + "Select ItemSelect ItemItem AItem BItem CItem D"); $('#tab_add').append(''); i++; j++; $('#delete_row').show(); } else { alert("You can only add upto a maximum of 10 items") $('#add_row').hide(); } }); $("#delete_row").click(function() { if (i > 1) { var r = confirm('Do you want to delete this item?'); if (r == true) { $("#addr" + (i - 1)).html(''); i--; $('#add_row').show(); } } else { alert("Entry cannot be deleted") $('#delete_row').hide(); } }); }); 

              
 
 
 
Customer Name
 
  Select Customer John Doe Jane Doe Tom Harry Steve Jobs  
 
 
 
1
 
Select Item
 
  Select Item Item A Item B Item C Item D  
 
 
 
 
   
 
 
 
 
 
 
 
TOTAL
 
 
  

Answer 1

为了减少为完成此操作而必须执行的DOM遍历量，我建议将data-*属性添加到元素中，以便您可以获取索引并使用它直接引用其他元素。

然后在你的$("#add_row").click(function() { function我们在创建新元素时添加data-index='"+j+"' …

 $('#addr' + i).html("" + (i + 1) + "Select ItemSelect ItemItem AItem BItem CItem D"); 

最后，将您的keyup处理程序更改为…

 $("#tab_add").on("keyup", ".Qty", function(e){ var qtyPur = parseFloat(this.value); if (!isNaN(this.value) && this.value.length != 0) { // this is where use use the data-index attribute to dynamically generate the target element ids $("#linePrice"+$(this).data('index')).val( parseFloat($("#itemPrice"+$(this).data('index')).val()) * qtyPur ); } calculateSum() }); 

见演示

Answer 2

这部分代码将计算每行的linePrice：

 $("tr").each(function() { if ($(this).children("td").length) { $($($(this).children("td")[5]).children("input")[0]).val( (($($($(this).children("td")[4]).children("input")[0]).val()) ? Number($($($(this).children("td")[4]).children("input")[0]).val()) : 0) * (($($($(this).children("td")[3]).children("input")[0]).val()) ? Number($($($(this).children("td")[3]).children("input")[0]).val()) : 0) ) } }); 

Answer 3

function grosschanged_total1（a）{

  var str = a; var res = str.split("_"); //alert(res[2]); var result = res[2]; var rate = parseFloat(document.getElementById("Gridview1_txtgross_" + result).value) * parseFloat(document.getElementById("Gridview1_txtrate_" + result).value); var scale77 = 2; // rate = roundNumberV2(rate, scale77); var gresult = 0.00; if(isNaN(rate)){ gresult= document.getElementById("Gridview1_txttotal_" + result).value = ""; } else{ gresult= document.getElementById("Gridview1_txttotal_" + result).value = parseFloat(Math.round(rate * 100) / 100).toFixed(2); } //GridView1_txtinvamt_0 var gfresult = parseFloat(gresult); var ggresult = 0.00; ggresult = gfresult + ggresult; // $("[id*=lblGrandTotal]").html(ggresult); //GridView1_txtdelinvnum_0 + GridView1_txtinvamt_0 = GridView1_txtgrosspt_0 // Calculate(); grosschanged_total1(a); } function Numerics(text) { var regexp = /^[0-9]*$/; if (text.value.search(regexp) == -1) { text.value = text.value.substring(0, (text.value.length - 1)); alert('Numerics only allowed'); if (text.value.search(regexp) == -1) text.value = ""; text.focus(); return false; } else return true; }