Anup Das Gupta's blog: textbox

Thursday, May 17, 2012

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>

Monday, January 24, 2011

Restricting to floating point number onkeypress

Very simple JavaScript code to restrict text box to have floating point number. Code is here-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Untitled Page</title>
 <script type="text/javascript">
     function restrict(val, e) {
         var keyChar;
         if (window.event)
             keyChar = String.fromCharCode(window.event.keyCode);
         else if (e)
             keyChar = String.fromCharCode(e.which);
         else
             return true;
         var number = parseFloat(val + keyChar);
         if (number != val + keyChar)
             return false;
         else
             return true;
     }
</script>
</head>
<body>
 <input name="number" onkeypress="return restrict(this.value, event)">
</body>
</html>