How to make total for every column by using jquery

Name salary Bonus Deduction total
mickel 500 600 300 800
adil 600 600 600 600
total 1100 1200 900 1400
how to make total for every column meaning how to do total found last line for all column

total 1100 1200 900 1400
my code as following

    @{
        Layout = null;
    }

    <!DOCTYPE html>

    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <script src="~/Scripts/jquery-1.10.2.js"></script>
        <script>
            $(function () {
                $("#btn").click(function () {
                    var x = $("#txt1").val();
                    var y = $("#txt2").val();
                    var z = $("#txt3").val();
                    var M = $("#txt4").val();
                    var L = parseInt(y) + parseInt(z) - parseInt(M);

                    $("#tb").append("<tr> <td>" + x + "</td> <td>" + y + "</td> <td>" + z + "<td>" + M + "</td><td>" + L + "</td></tr>");
                });
                $("#tb").on("click", "tr", function () {

                    $(this).find("td").slice(0, 4).prop("contenteditable", true);

                });

            });
        </script>
    </head>
    <body>
        <div>
            Name<input type="text" id="txt1" /><br />
            Salary<input type="text" id="txt2" /><br />
            Bonus<input type="text" id="txt3" /><br />
            Deduction<input type="text" id="txt4" /><br />
            <input type="button" value="add" id="btn" />
            <table>
                <thead>
                    <tr>
                        <td>
                            Name
                        </td>
                        <td>
                            Salary

                        </td>
                        <td>
                            Bonus
                        </td>
                        <td>
                            Deduction
                        </td>
                        <td>
                            total
                        </td>
                    </tr>
                </thead>
                <tbody id="tb" class="tb1"></tbody>
            </table>
        </div>
    </body>
    </html>    

First you’ll need to add a “totals” row. Since it’ll be in the footer let’s make it semantic and add a <tfoot> to the table:

<tfoot id="totals">
  <tr>
    <td class="totals-ignore">Total</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</tfoot>

Notice the .totals-ignore, add that to any column you don’t want to total up (do this for the first column in tbody too):

$("#tb").append("<tr> <td class='total-ignore'>" + x + "</td> <td>" + y + "</td> <td>" + z + "<td>" + M + "</td><td>" + L + "</td></tr>");

Next, iterate through each row, then each column, extract the totals and add it to an array:

var totals = [];
// Go through each row
$('#tb').find('tr').each(function() {
    var $row = $(this);

    // Then each column
    $row.children('td').not('.total-ignore').each(function(index) {
        // "Initialize" the totals array. Basically this equals itself or 0. 
        // This is important because you can't add to undefined!
        totals[index] = totals[index] || 0;

        // Add the total. This will either add the value if it's a number
        // or 0 if it's blank/not a number
        totals[index] += parseInt($(this).text()) || 0;
    });
})

// Loop through each column in the foooter and update the values
$('#totals td').not('.total-ignore').each(function(index) {
    $(this).text(totals[index]);
});

Then, you’ll end up with this:

Note that in order for the footer to be able to print at the bottom of every page when printing the page the tfoot needs to come immediately after the thead and before any tbody tags.

3 Likes

Nice, didn’t know that!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.