Calculate and display Sum Total of HTML Table column values in Label using jQuery

amars

SOLVED CLOSED ACTIVE ANSWERED
User: amars
Posted: on May 28, 2018 12:24 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 31446
Sample Code: Download

this is html table structure with some columns now i want to get sum of total from tr.append("<td >" + d1[i].value + "</td>"); to label control, whenever i will add row to table then it will get count some total and display in label control

                    var tr;
                    var div;
                    var data1 = JSON.stringify(getAllInventoryRecords());//used to get data from controls
                    
                    var d1 = JSON.parse(data1);
                    // alert(d1);
                    for (var i = 0; i < d1.length; i++) {
                        //  alert(tabledata[i].DocumentNumber);
                       
                        tr = $('<tr/>');
                        tr.append("<td>" + d1[i].description + "</td>");
                        tr.append("<td>" + d1[i].Qty + "</td>");
                        tr.append("<td>" + d1[i].unitprice + "</td>");
                        tr.append("<td >" + d1[i].value + "</td>");
                        tr.append("<td>" + d1[i].disc + "</td>");
                        tr.append("<td>" + d1[i].tax +"%", "</td>");
                        tr.append("<td>" + d1[i].cgst + "</td>");
                        tr.append("<td>" + d1[i].sgst + "</td>");
                        tr.append("<td>" + d1[i].igst + "</td>");
                        tr.append("<td><button id='btndelete'  style='height:28px;width:107px;' class='btn btn-default btn-sm'><i class='glyphicon glyphicon-ok'></i> Delete</button></td>");
                      
                        $('#tblCustomers').append(tr);

                      
                        $('#lbltotal').html(d1[i].value);//this label is use to get sum of value column 
                    }

----------------------------------------------------

-----------------------------------------------------

Cycle |2 |1 |1 |ss |1 |1

-----------------------------------------------------

AC |2 |2 |4 |qq |1 |2

Total value:4 //this total is from value column

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on May 28, 2018 03:40 AM
Modified: on May 28, 2018 03:44 AM
Report

Hi amars,

Check this example. Now please take its reference and correct your code.

<div>
    <table id="tblCustomers">
        <tr>
            <th>
                description
            </th>
            <th>
                Qty
            </th>
            <th>
                unitprice
            </th>
            <th>
                value
            </th>
            <th>
                disc
            </th>
            <th>
                tax
            </th>
            <th>
                cgst
            </th>
            <th>
                sgst
            </th>
            <th>
                igst
            </th>
        </tr>
    </table>
    Total:&nbsp;<span id="lbltotal"></span>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        var customers = new Array();
        var obj = {};
        obj.description = "description 1";
        obj.Qty = "5";
        obj.unitprice = "10";
        obj.value = "50";
        obj.disc = "10";
        obj.tax = "4";
        obj.cgst = "1";
        obj.sgst = "2";
        obj.igst = "3";
        customers.push(obj);
        obj = {};
        obj.description = "description 1";
        obj.Qty = "7";
        obj.unitprice = "20";
        obj.value = "140";
        obj.disc = "20";
        obj.tax = "3";
        obj.cgst = "5";
        obj.sgst = "2";
        obj.igst = "1";
        customers.push(obj);
        var tr;
        var total = 0;
        var d1 = customers;
        for (var i = 0; i < d1.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + d1[i].description + "</td>");
            tr.append("<td>" + d1[i].Qty + "</td>");
            tr.append("<td>" + d1[i].unitprice + "</td>");
            tr.append("<td >" + d1[i].value + "</td>");
            tr.append("<td>" + d1[i].disc + "</td>");
            tr.append("<td>" + d1[i].tax + "%", "</td>");
            tr.append("<td>" + d1[i].cgst + "</td>");
            tr.append("<td>" + d1[i].sgst + "</td>");
            tr.append("<td>" + d1[i].igst + "</td>");
            tr.append("<td><button id='btndelete'  style='height:28px;width:107px;' class='btn btn-default btn-sm'><i class='glyphicon glyphicon-ok'></i> Delete</button></td>");
            $('#tblCustomers').append(tr);
            total += parseFloat(d1[i].value);
        }
        $('#lbltotal').html(total); //this label is use to get sum of value column 
    });
</script>

Demo

Calculate and display Sum Total of HTML Table column values in Label using jQuery

Company

Explore

Follow us

Contact Us