Calculate and display Column sum of dynamic Table row in Footer in jQuery

Last Reply one month ago By SUJAYS

Posted one month ago

How to sum the column for auto generated row in footer for column 3.

<table id="tblItems" class="table table-responsive">
    <thead>
        <tr>
            <th>Val1</th>
            <th>Val2</th>
            <th >Val3</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

 

        <script type="text/javascript">
            function Add() {
                AddRow($("#txtVal1").val(), $("#txtVal2").val(), $("#txtVal3").val());
                $("#txtVal1").val("");
                $("#txtVal2").val("");
                $("#txtVal3").val("");
            };

            function AddRow(name, qty, price) {
                var tBody = $("#tblItems > TBODY")[0];

                //Add Row.
                row = tBody.insertRow(-1);

                //Add Name cell.
                var cell = $(row.insertCell(-1));
                cell.html(name);

                //Add Qty cell.
                cell = $(row.insertCell(-1));
                cell.html(qty);

                //Add Price cell.
                cell = $(row.insertCell(-1));
                cell.html(price);

                //Add Amount cell.
                cell = $(row.insertCell(-1));
                cell.html(parseInt(qty) * parseInt(price));

                //Add Button cell.
                cell = $(row.insertCell(-1));
                var btnRemove = $("<a>Remove</a>");
                btnRemove.attr("href", "#");
                btnRemove.attr("onclick", "Remove(this);");
                cell.append(btnRemove);
            };

            function Remove(button) {
                var row = $(button).closest("TR");
                var name = $("TD", row).eq(0).html();
                if (confirm("Do you want to delete item : " + name)) {
                    var table = $("#tblItems")[0];
                    table.deleteRow(row[0].rowIndex);
                }
            };

 

Posted one month ago

Hi SUJAYS,

Refer below code.

HTML

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        function Add() {
            AddRow($("#txtVal1").val(), $("#txtVal2").val(), $("#txtVal3").val());
            $("#txtVal1").val("");
            $("#txtVal2").val("");
            $("#txtVal3").val("");
            CalculateTotal();
        };

        function AddRow(name, qty, price) {
            var tBody = $("#tblItems > TBODY")[0];

            //Add Row.
            row = tBody.insertRow(-1);

            //Add Name cell.
            var cell = $(row.insertCell(-1));
            cell.html(name);

            //Add Qty cell.
            cell = $(row.insertCell(-1));
            cell.html(qty);

            //Add Price cell.
            cell = $(row.insertCell(-1));
            cell.html(price);

            //Add Amount cell.
            cell = $(row.insertCell(-1));
            cell.html(parseInt(qty) * parseInt(price));

            //Add Button cell.
            cell = $(row.insertCell(-1));
            var btnRemove = $("<a>Remove</a>");
            btnRemove.attr("href", "#");
            btnRemove.attr("onclick", "Remove(this);");
            cell.append(btnRemove);
        };

        function Remove(button) {
            var row = $(button).closest("TR");
            var name = $("TD", row).eq(0).html();
            if (confirm("Do you want to delete item : " + name)) {
                var table = $("#tblItems")[0];
                table.deleteRow(row[0].rowIndex);
            }
            CalculateTotal();
        };

        function CalculateTotal() {
            var grandT = 0;
            $("#tblItems > TBODY > tr").each(function () {
                var t3 = $(this).find('td').eq(2).html();
                if (!isNaN(t3)) {
                    grandT += parseFloat(t3);
                }
            });
            $("#gTotal").html(grandT.toFixed());
        }
    </script>
</head>
<body>
    <div>
        <input type="text" id="txtVal1" value="" />
        <input type="text" id="txtVal2" value="" />
        <input type="text" id="txtVal3" value="" />
        <input type="button" value="Add" onclick="Add()" />
        <table id="tblItems" class="table table-responsive">
            <thead>
                <tr>
                    <th>Val1</th>
                    <th>Val2</th>
                    <th>Val3</th>
                    <th></th>
                </tr>
            </thead>
            <tbody></tbody>
            <tfoot>
                <tr>
                    <td colspan="2">GrandTotal</td>
                    <td>
                        <span id="gTotal"></span>
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
</body>
</html>

Demo


Posted one month ago

I got this answer from this thank you

var a = $('#hidqty').val();
var sum = parseInt(a) + parseInt(price);
$('#hidqty').val(sum);