Calculate Total Sum Of Dynamically Added Items To A Table

I would like to calculate the line total for each item using the itemPrice* Qty fields, the line amount is to be auto populated in the linePrice textbox. After which the grand tota

Solution 1:

In order to reduce the amount of DOM traversal that you have to do to accomplish this, I suggest adding data-* attributes to your elements so that you can get the index and use that to reference the other elements directly.

<td><input type="text" name="itemPrice0"id="itemPrice0" data-index="0" class="itemPrice form-control" placeholder="Unit Price"></td>
<td><input type="number" name="Qty0"id="Qty0" data-index="0" class="Qty form-control" onkeypress="if(!isNumberKey(event)){return false;}" placeholder="Quantity"></td>
<td><input type="text" name="linePrice0"id="linePrice0" data-index="0" class="linePrice form-control" onkeypress="return isNumberKey(event)" placeholder="Line Price"readonly></td>

Then in your $("#add_row").click(function() { function we add data-index='"+j+"' when creating the new elements ...

$('#addr' + i).html("<td>" + (i + 1) + "</td><td><b>Select Item</b></td><tdcolspan='1'><selectname='Sub_Name" + i + "'class='form-control'><optionvalue=''>Select Item</option><optionvalue='1000001'>Item A</option><optionvalue='1000002'>Item B</option><optionvalue='1000003'>Item C</option><optionvalue='1000004'>Item D</option></select></td><td><inputtype='text'name='itemPrice" + i + "'id='itemPrice" + j + "'data-index='"+j+"'class='itemPrice form-control'placeholder='Unit Price'></td><td><inputtype='number'name='Qty" + i + "'id='Qty" + j + "'data-index='"+j+"'class='Qty form-control'onkeypress='return isNumberKey(event)'placeholder='Quantity'></td><td><inputtype='text'name='linePrice" + i + "'id='linePrice" + j + "'data-index='"+j+"'class='linePrice form-control'onkeypress='return isNumberKey(event)'placeholder='Line Price'readonly></td>");

Finally, change your keyup handler to ...

$("#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()

});

See Demo

Solution 2:

This part of code will calculate linePrice of each row:

$("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)

    )
  }
});

Solution 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_0var 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);

    }

    functionNumerics(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();
            returnfalse;
        }
        elsereturntrue;
    }