Calculating row total, column total, grand total if a table or gridview using jQuery

In this post lets discuss a very common problem. I have answered many such posts. Finally I decided to write a blog post on it. This is regarding calculating the total of the columns, total of the rows and grand total in a table. For this case lets take textbox in each cell and on keyup we are going to do the calculation. And the code goes here-

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".data").keyup(function () {
                var temp, total = 0, index;
                $(this).closest("tr").find(".data").each(function (i, item) {
                    temp = parseFloat($(item).val());
                    if (!isNaN(temp))
                        total = total + temp;
                });
                $(this).closest("tr").find(".rowTotal").val(total);
                total = 0;
                index = $(this).closest("tr").find("td").index($(this).closest("td"));
                $("#tbl tr").each(function (i, item) {

                    if ($(item).find("td:eq(" + index + ") .data").hasClass("data")) {
                        temp = parseFloat($(item).find("td:eq(" + index + ") .data").val());
                        if (!isNaN(temp))
                            total = total + temp;
                    }
                });
                $("#tbl tr:last td:eq(" + index + ") .columnTotal").val(total);
                calculateGrandTotal();
            })
        });
        function calculateGrandTotal() {
            (function () {
                var temp, total = 0;
                $(".columnTotal").each(function () {
                    temp = parseFloat($(this).val());
                    if (!isNaN(temp))
                        total = total + temp;
                });
                $(".grandTotal").val(total);
            })();
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <table id="tbl">
    <tr>
        <td><asp:TextBox ID="TextBox1" CssClass="data" runat="server"></asp:TextBox></td>
        <td><asp:TextBox ID="TextBox2" CssClass="data" runat="server"></asp:TextBox></td>
        <td><asp:TextBox ID="TextBox3" CssClass="data" runat="server"></asp:TextBox></td>
        <td><asp:TextBox ID="TextBox4" CssClass="data" runat="server"></asp:TextBox></td>
        <td><asp:TextBox ID="TextBox5" CssClass="rowTotal" ReadOnly="true" runat="server"></asp:TextBox></td>
    </tr>
        <tr>
        <td><asp:TextBox ID="TextBox6" CssClass="data" runat="server"></asp:TextBox></td>
        <td><asp:TextBox ID="TextBox7" CssClass="data" runat="server"></asp:TextBox></td>
        <td><asp:TextBox ID="TextBox8" CssClass="data" runat="server"></asp:TextBox></td>
        <td><asp:TextBox ID="TextBox9" CssClass="data" runat="server"></asp:TextBox></td>
        <td><asp:TextBox ID="TextBox10" CssClass="rowTotal" ReadOnly="true" runat="server"></asp:TextBox></td>
    </tr>
        <tr>
        <td><asp:TextBox ID="TextBox11" CssClass="data" runat="server"></asp:TextBox></td>
        <td><asp:TextBox ID="TextBox12" CssClass="data" runat="server"></asp:TextBox></td>
        <td><asp:TextBox ID="TextBox13" CssClass="data" runat="server"></asp:TextBox></td>
        <td><asp:TextBox ID="TextBox14" CssClass="data" runat="server"></asp:TextBox></td>
        <td><asp:TextBox ID="TextBox15" CssClass="rowTotal" ReadOnly="true" runat="server"></asp:TextBox></td>
    </tr>
        <tr>
        <td><asp:TextBox ID="TextBox16" CssClass="data" runat="server"></asp:TextBox></td>
        <td><asp:TextBox ID="TextBox17" CssClass="data" runat="server"></asp:TextBox></td>
        <td><asp:TextBox ID="TextBox18" CssClass="data" runat="server"></asp:TextBox></td>
        <td><asp:TextBox ID="TextBox19" CssClass="data" runat="server"></asp:TextBox></td>
        <td><asp:TextBox ID="TextBox20" CssClass="rowTotal" ReadOnly="true" runat="server"></asp:TextBox></td>
    </tr>
        <tr>
        <td><asp:TextBox ID="TextBox21" CssClass="columnTotal" ReadOnly="true" runat="server"></asp:TextBox></td>
        <td><asp:TextBox ID="TextBox22" CssClass="columnTotal" ReadOnly="true" runat="server"></asp:TextBox></td>
        <td><asp:TextBox ID="TextBox23" CssClass="columnTotal" ReadOnly="true" runat="server"></asp:TextBox></td>
        <td><asp:TextBox ID="TextBox24" CssClass="columnTotal" ReadOnly="true" runat="server"></asp:TextBox></td>
        <td><asp:TextBox ID="TextBox25" CssClass="grandTotal" ReadOnly="true" runat="server"></asp:TextBox></td>
    </tr>
    </table>
    </form>
    </body>
</html>

Copy or duplicate column data in a table using context menu

This is a simple post used to copy data in a cell of a table to other cells of the same column. For this post we will be using a very simple HTML layout as follows-

<table>
        <tr>
            <th>data 1</th><th>data 2</th>
        </tr>
        <tr>
            <td><input type="text" /> </td>
            <td><input type="text" /> </td>
        </tr>
       <tr>
            <td><input type="text" /> </td>
            <td><input type="text" /> </td>
        </tr>
        <tr>
            <td><input type="text" /> </td>
            <td><input type="text" /> </td>
        </tr>
        <tr>
            <td><input type="text" /> </td>
            <td><input type="text" /> </td>
        </tr>
        <tr>
            <td><input type="text" /> </td>
            <td><input type="text" /> </td>
        </tr>
    </table>

For context menu we are going to use this plugin.

For content menu we are using the following HTML for the menu content, which include two options- copy and cancel. HTML for the context menu is as follows-

    <ul id="myMenu" class="contextMenu">
        <li class="copy"><a href="#copy">Copy value</a></li>
        <li class="quit separator"><a href="#cancel">Cancel</a></li>
    </ul>

For implementing the context menu we need to take the following files references or we can download from the desired location-

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
    <script src="http://labs.abeautifulsite.net/archived/jquery-contextMenu/demo/jquery.contextMenu.js"
        type="text/javascript"></script>
    <link href="http://labs.abeautifulsite.net/archived/jquery-contextMenu/demo/jquery.contextMenu.css"
        rel="stylesheet" type="text/css" />

Now we can use following JavaScript code for copying/duplicating the data in a column-

    <script type="text/javascript">
        $(document).ready(function () {
            $("table input").contextMenu({
                menu: 'myMenu'
            }, function (action, el, pos) {
                if (action == "copy") {
                    index = el.closest("tr").children().index(el.parent()[0]);
                    $("table tr").each(function (i, item) {
                        $(item).find("td:eq(" + index + ") input").val(el.val());
                    })
                }
            });
        });
    </script>