I need a help In my project i have a html table i need the total cell sum and get the result to grand total textbox here my project is in aspnet mvc I have also attached my source code belowltscript type34textjavascript34gt function Add if trim34txtRate34val 0 3434 alert34No Data Found34 else AddRow34ddlItems optionselected34text 34txtRate34val 34

Hi rajeeshPlease refer below sampleHTMLlttable id34tblCustomers34gt lttrgt ltthgtIDltthgt ltthgtNameltthgt ltthgtDetailsltthgt lttrgt lttrgt lttdgt1lttdgt lttdgtJohn Hammondlttdgt lttdgtltinput type34text34 class34price34 value345034 gtlttdgt lttrgt lttrgt lttdgt2lttdgt lttdgtMudassar Khanlttdgt lttdgtltinput type34text34 class34price34 value342034 gtlttdgt lttrgt lttrgt lttdgt3lttdgt lttdgtSuzanne Mathewslttdgt lttdgtltinput type34text34 class34price34 value341934 gtlttdgt lttrgt lttrgt lttdgt4lttdgt lttdgtRobert Schidnerlttdgt lttdgtltinput type34text34 class34price34 value3435

Calculate TextBox sum inside HTML Table using JavaScript and jQuery in ASP.Net MVC

rajeesh

SOLVED CLOSED ACTIVE ANSWERED
User: rajeesh
Posted: on Dec 15, 2021 10:02 PM
Forum: ASP.Net MVC
Answer: 2
Views: 7713
Sample Code: Download

I need a help. In my project i have a html table i need the total cell sum and get the result to grand total textbox here my project is in asp.net mvc. I have also attached my source code below

<script type="text/javascript">    
    function Add() {
        if ($.trim($("#txtRate").val()) == 0 || "") {
            alert("No Data Found");
        }
        else {
            AddRow($("#ddlItems option:selected").text(), $("#txtRate").val(), $("#txtSgst").val(), $("#txtCgst").val(), $("#txtdisc").val(), $("#txtdisamt").val(), $("#txtCgstamt").val(), $("#txtSgstamt").val(), $("#txtamt").val(), $("#txttotal").val());          

            $("#dditemlist").val("0");
            $("#txtRate").val("");
            $("#txtSgst").val("");
            $("#txtCgst").val("");
            $("#txtqty").val("");
            $("#txtdisc").val("");
            $("#txtdisamt").val("");
            $("#txtCgstamt").val("");
            $("#txtSgstamt").val("");
            $("#txtamt").val("");
            $("#txttotal").val("");
        };
        function AddRow(items, rate, sgst, cgst, qty, dis, disamt, cgstamt, sgstamt, amt, total) {
            var tBody = $("#tblItems > TBODY")[0];

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

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

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

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

            //Add Sgst cell.
            cell = $(row.insertCell(-1));
            cell.html(sgst);

            //Add Cgst cell.
            cell = $(row.insertCell(-1));
            cell.html(cgst);

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

            //Add Dis cell.
            cell = $(row.insertCell(-1));
            cell.html(dis);

            //Add Disamt cell.
            cell = $(row.insertCell(-1));
            cell.html(disamt);

            //Add Cgstamt cell.
            cell = $(row.insertCell(-1));
            cell.html(cgstamt);

            //Add Sgstamt cell.
            cell = $(row.insertCell(-1));
            cell.html(sgstamt);

            //Add Amount cell.
            cell = $(row.insertCell(-1));
            cell.html(amt);

            //Add Total cell.
            cell = $(row.insertCell(-1));
            cell.html(total);
           
            calculateSum();
            
            //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);
            }
        };
        function calculateSum() {
           var sum=0;
            var table = document.getElementById("tblItems");
            var name = $("TD", row).eq(10).html();
           

            for(var i=0;i<table.rows.length;i++)
            {
                sum += $("TD", row).eq(10).html();
            }

            document.getElementById('txtsubtotal').value = sum;
        };
</script>

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

arjunv

0 2

Reply
ANSWER
User: arjunv
Replied: on Dec 16, 2021 05:42 AM
Report

Hi rajeesh,

Please refer below sample.

HTML

<table id="tblCustomers">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Details</th>
    </tr>
    <tr>
        <td>1</td>
        <td>John Hammond</td>
        <td><input type="text" class="price" value="50" /></td>
    </tr>
    <tr>
        <td>2</td>
        <td>Mudassar Khan</td>
        <td><input type="text" class="price" value="20" /></td>
    </tr>
    <tr>
        <td>3</td>
        <td>Suzanne Mathews</td>
        <td><input type="text" class="price" value="19" /></td>
    </tr>
    <tr>
        <td>4</td>
        <td>Robert Schidner</td>
        <td><input type="text" class="price" value="35" /></td>
    </tr>
</table>
Total:
<input type="text" id="txtTotal" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" >
    $(document).ready(function () {
        var sum = 0;
        $(".price").each(function () {
            if (!isNaN(this.value) && this.value.length != 0) {
                sum += parseFloat(this.value);
            }
        });
        $("#txtTotal").val(sum.toFixed(2));
    });
</script>

Demo

arjunv

0 4

Reply
ANSWER
User: arjunv
Replied: on Dec 17, 2021 04:20 AM
Report

rajeesh says:
function calculateSum() {

           var sum=0;

            var table = document.getElementById("tblItems");

            var name = $("TD", row).eq(10).html();



            for(var i=0;i<table.rows.length;i++)

            {

                sum += $("TD", row).eq(10).html();

            }

            document.getElementById('txtsubtotal').value = sum;

        };

Replace with below Code.

function calculateSum() {
    var sum = 0;
    var table = document.getElementById("tblItems");
    for (var i = 0; i < table.rows.length; i++) {
        var row = table.rows[i];
        var value = $("TD", row).find('input[type=text]').val();
        if (!isNaN(value) && value.length != 0) {
            sum += parseFloat($("TD", row).find('input[type=text]').val());
        }
    }
    document.getElementById('txtsubtotal').value = sum;
};

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

Calculate TextBox sum inside HTML Table using JavaScript and jQuery in ASP.Net MVC

Company

Explore

Follow us

Contact Us