Get total from table input as grand total in jquery?

Question

I created a simple stock saving table for my project. Also i added a button to add row to my table.this is my table,

                            [add button]
+---------------+-----------+-----------+
+   lense type  +   qty     +   total   +
+---------------+-----------+-----------+
+               +           +           +
+---------------+-----------+-----------+
+               grand total : LKR       +
+---------------------------------------+

EDIT

I added html code of the table,

<table class="table" id="tbl-add-lense">
            <thead style="background-color:#f5edff;">
            <th style="width:2%;"><input type="checkbox" name="chk_in" id="checkall"></input></th>
            <th style="width:2%;">item no</th>
            <th style="width:5%;">Lense Type</th>
            <th style="width:5%;">Unit price</th>
            <th style="width:5%;">Quantity</th>
            <th style="width:5%;">Total</th>
        </thead>
        <tbody id="tbl-lesne-body">
            <tr id="addr0">
                <td><input type="checkbox" name="chk_in"></input></td>
                <td>1</td> <td><input name='tb-lense-type1' type='text' placeholder='Lense Type' class='form-control '/> </td>
                <td><input  name='td-lunit1' type='number' placeholder='0'  class='form-control'></td>
                <td><input  name='td-lqty1' type='number' placeholder='0'  class='form-control'></td>
                <td><input  name='tb-ltotal1' type='number' placeholder='00.00'  class='form-control total'></td>

            </tr>

        </tbody>
        <tfooter></tfooter>
       </table>

This table has one row. I used add button to add more rows. add row button code,

$("#add-lense-row").click(function(){

      $("#tbl-lesne-body").append("<tr id='addr"+(i+1)+"'><td><input type='checkbox' name='chk_in'></input></td><td>"+ (i+1) +"</td> <td><input name='tb-lense-type"+i+"' type='text' placeholder='Lense Type' class='form-control '/> </td> <td><input  name='td-lunit"+i+"' type='number' placeholder='0'  class='form-control'></td><td><input  name='td-lqty"+i+"' type='number' placeholder='0'  class='form-control'></td><td class='tot'><input  name='td-ltotal"+i+"' type='number' placeholder='00.00' class='form-control total'></td></tr>");

      i++; 

   });

total <td> has a input ,

<input  name='tb-ltotal1' type='number' placeholder='00.00'  class='form-control total'>

I need to get sum of total td inputs when typing on a input. I tried this code,

 $(".total").keyup(function(){
            console.log('Typing');
            sum += parseFloat($(this).val()); 
        });

but it only working on the first table row. If i add a new row and try this code. It's not working. I removed sum += parseFloat($(this).val()); line and tried. Still code working only in the first row. How to solve this. Thank you

Answer 1

Your code needed some corrections:

1. You were only getting the value of input that triggered the 'keyup' event, as the sum. But you needed to loop through all inputs with class total and add the values of all to get the grand total.

2. As only the first row was added through html and rest of the rows were being added dynamically through javascript/jquery, your normal event binding worked only for the first row. For dynamically generated elements i.e. the elements which were not there when the page first loaded, you need to use slightly different syntax for event binding e.g. $(document).on("keyup", ".total", function(){}). By binding events dynamically in this way, keyup event now fires on all inputs.

   $(document).on("keyup", ".total", function(){
   
   console.log('Typing');
   var sum = 0;
   $(".total").each(function(index){
   sum += parseFloat($(this).val()); 
   });//each
   
   console.log( sum );
   
   });//keyup`