CODEWITHSUNDEEP
javascriptjquery
Syafiq AZ
Syafiq AZ

Reputation: 67

Sum Every Input in Dynamic Table using JQuery

I have created a table where user can add row. And on specific column, there is an input where user can insert a value and jQuery will sum all the value and insert it to another input

So, to make it clear, here's an example:

example

The problem is, after I add more row, it won't sum all the input. It will only sum the FIRST input of the FIRST row but it won't sum when I insert a value in the second, third, forth and ... input.

Here's the table:

<table id="twe">
        <thead>
        <tr>
          <th valign="middle"><center>Amaun</center></th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td><input name="amount[]" type="text" class="amount" id="amount[]" value="" /></td>
        </tr>
        </tbody>
      </table>

<button type="button" onclick="addrow('twe')"  title="Add">Add</button>
<br/>
<br/>
Sum: <input type="text" id="sum" />

And here's the script

(function($) {
    $.fn.currencyFormat = function() {
        this.each( function( i ) {
            $(this).change( function( e ){
                if( isNaN( parseFloat( this.value ) ) ) return;
                this.value = parseFloat(this.value).toFixed(2);
            });
        });
        return this; //for chaining
    }
})( jQuery );

$(document).ready(function () {
    $('.amount').currencyFormat();

});


$(document).ready(function () {
 $(".amount").each(function () {

     $(this).keyup(function () {
         calculateSum();
     });
 });

});

function calculateSum() {

 var sum = 0;
 $(".amount").each(function () {

     if (!isNaN(this.value) && this.value.length != 0) {
         sum += parseFloat(this.value);
     }

 });
 $("#sum").val(sum.toFixed(2));
 }


 function addrow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var colCount = table.rows[1].cells.length;

        for(var i=0; i<colCount; i++) {

            var newcell = row.insertCell(i);

            newcell.innerHTML = table.rows[1].cells[i].innerHTML;
            switch(newcell.childNodes[0].type) {
                case "text":
                        newcell.childNodes[0].value = "";
                        break;

            }
        }
}

Same goes with the input currency. It only works on the first input of the first row.

Need help

Thank you

Upvotes: 0

Views: 2208

Answers (1)

entropic
entropic

Reputation: 1683

The problem lies in when you are binding the events. In your document.ready function you are looping through the .amount items and binding a keyup, but this doesn't account for FUTURE items that will be created. What you want to do is bind all instances AND future instances to run the calculation.

This can be done using the .on event in jQuery. Your document.ready would be updated as follows:

$(document).ready(function () {
    $(document).on("keyup", ".amount", calculateSum);
});

Working Fiddle: http://jsfiddle.net/p2Hbm/

Upvotes: 2

Related Questions