How to sum the column for auto generated row in footer for column 3lttable id34tblItems34 class34table tableresponsive34gt lttheadgt lttrgt ltthgtVal1ltthgt ltthgtVal2ltthgt ltth gtVal3ltthgt ltthgtltthgt lttrgt lttheadgt lttbodygt lttbodygtlttablegt ltscript type34textjavascript34gt function Add

Hi SUJAYSRefer below codeHTMLlthtmlgtltheadgt ltmeta name34viewport34 content34widthdevicewidth34 gt lttitlegtIndexlttitlegt ltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsjquery183jqueryminjs34gtltscriptgt ltscript type34textjavascript34gt function Add AddRow34txtVal134val 34txtVal234val 34txtVal334val 34txtVal134val3434 34txtVal234val3434 34txtVal334val3434 CalculateTotal function AddRowname qty price var tBody 34tblItems gt TBODY340 Add Row row tBodyinsertRow1 Add Name cell var cell rowinsertCell1 cellhtmlname Add Qty cell cell rowin

I got this answer from this thank youvar a 39hidqty39valvar sum parseInta parseIntprice39hidqty39valsum

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

SUJAYS

SOLVED CLOSED ACTIVE ANSWERED
User: SUJAYS
Posted: on Oct 27, 2020 01:06 AM
Forum: jQuery and jQuery Plugins
Answer: 2
Views: 15778

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);
                }
            };

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 3

Reply
ANSWER
User: dharmendr
Replied: on Oct 27, 2020 06:07 AM
Report

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

SUJAYS

0 4

Reply
ANSWER
User: SUJAYS
Replied: on Oct 27, 2020 06:18 AM
Report

I got this answer from this thank you

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

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

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

Company

Explore

Follow us

Contact Us