JQuery Sum of Table Columns and Rows

by Avinashullal

HTML

<table id="tblTrack" cellpadding="0" cellspacing="1" class="table table-bordered">
    <tbody>
        <tr>
            <th>Parent Activity</th>
            <th>Sub Activity</th>
            <th>Hours by Week</th>
            <th>Planned Period</th>
            <th>1/12/2015</th>
            <th>1/13/2015</th>
            <th>1/14/2015</th>
            <th>1/15/2015</th>
            <th>1/16/2015</th>
            <th>Comments</th>
            <th>Total</th>
        </tr>
        <tr>
            <td>Analytics</td>
            <td>Training/Coaching</td>
            <td class="hoursbyweek">25</td>
            <td>From: 01/12/2015To: 07/13/2015</td>
            <td class="mon">
                <input type="text" id="txtMon" class="" style="width:50px;" onchange="CalcTot()">
            </td>
            <td class="tue">
                <input type="text" id="txtTue" class="" style="width:50px;" onchange="CalcTot()">
            </td>
            <td class="wed">
                <input type="text" id="txtWed" class="" style="width:50px;" onchange="CalcTot()">
            </td>
            <td class="thu">
                <input type="text" id="txtThu" class="" style="width:50px;" onchange="CalcTot()">
            </td>
            <td class="fri">
                <input type="text" id="txtFri" class="" style="width:50px;" onchange="CalcTot()">
            </td>
            <td>
                <input type="text" id="txtTotal" class="" style="width:50px;">
            </td>
            <td class="tot"></td>
        </tr>
        <tr>
            <td>Analytics</td>
            <td>Analysis/Planning</td>
            <td class="hoursbyweek">25</td>
            <td>From: 01/12/2015To: 03/13/2015</td>
            <td class="mon">
                <input type="text" id="txtMon" class="" style="width:50px;" onchange="CalcTot()">
            </td>
            <td class="tue">
                <input type="text" id="txtTue" class="" style="width:50px;" onchange="CalcTot()">
    ...

CSS

.table td, .table th {
    border: 1px solid #ccc;
    padding: 4px
}

JavaScript

$(document).ready(function () {
    var HrsByWkSum = colSum("hoursbyweek");
    $('#HrsByWkSum').html(HrsByWkSum);

    $("input").each(function () {
        $(this).keyup(function () {
            newSum.call(this);
        });
    });

});

function colSum(str) {
    var sum = 0;
    //iterate through each input and add to sum
    $('td.' + str).each(function () {
        sum += parseInt($(this).text());
    });
    //change value of total
    return sum;
}

function newSum() {

    var sum = 0;
    var thisRow = $(this).closest('tr');

    var total = 0;

    //iterate through each input and add to sum
    $(thisRow).find("td:not(.tot) input").each(function () {
        if (!isNaN(this.value) && this.value.length != 0) {
            sum += parseInt(this.value);
        }
    });

    //change value of total
    $(thisRow).find(".tot").html(sum);


    // the grand total
    $('.tot').each(function () {
        if (!isNaN($(this).html()) && $(this).html().length != 0) {
            total += parseInt($(this).html());
        }
    });
    $('#TotalSum').html(total);

}