Calculating the Sum inside a table using Jquery


Here is one sample code to sum the column values using jquery.
 
HTML:
 
<table width="300px" border="1" style="border-collapsecollapsebackground-color#E8DCFF">
        <tr>
            <td width="40px">1</td>
            <td>Number</td>
            <td><input class="txt" type="text" name="txt" /></td>
        </tr>
        <tr>
            <td>2</td>
            <td>Number</td>
            <td><input class="txt" type="text" name="txt" /></td>
        </tr>
        <tr>
            <td>3</td>
            <td>Number</td>
            <td><input class="txt" type="text" name="txt" /></td>
        </tr>
        <tr id="summation">
            <td  colspan ="2" align="right">
                Sum :
            </td>
            <td align="center"><span id="sum">0</span></td>
        </tr>
</table>
 
jQuery:
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js">
</script>
    <script> 
        $(document).ready(function() {
            //iterate through each textboxes and add keyup
           //handler to trigger sum event
            $(".txt").each(function() {
                $(this).keyup(function() {
                    calculateSum();
                });
            });
        });
        function calculateSum() {
            var sum = 0;
            //iterate through each textboxes and add the values
            $(".txt").each(function() {
                //add only if the value is number
                if (!isNaN(this.value) && this.value.length != 0) {
                    sum += parseFloat(this.value);
                    $(this).css("background-color""#FEFFB0");
                }
                else if (this.value.length != 0){
                $(this).css("background-color""red");
               }
            });
            $("#sum").html(sum.toFixed(2));
        }
</script>
 
Download the working sample and give a try!!

Up Next
    Ebook Download
    View all
    Learn
    View all