Display Sum of HTML Table Column Total in TextBox in jQuery and JavaScript

Last Reply 4 days ago By pandeyism

Posted 4 days ago

i want to sum a specific column in html table

i have 5 column and i want to sum a 4 column and display into textbox using jquery or javascript

<table>
    <tr><th>Name</th><th>Phone</th><th>Amount</th></tr>
    <tr><td>A</td><td>112</td><td>25.25</td></tr>
    <tr><td>B</td><td>222</td><td>78.63</td></tr>
    <tr><td>C</td><td>4444</td><td>14</td></tr>
</table>
<input id="btnEditForAddorg" type="button" value="+ADD " runat="server" class="btncss2" /

i want a sum of amount column on button click

th:nth-child(3);

You are viewing reply posted by: pandeyism 4 days ago.
Posted 4 days ago

Hi SajidHussa,

Refer below sample.

HTML

<div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('[id*=btnEditForAddorg]').on("click", function () {
                var grid = document.getElementById("tblcoursesubject");
                var rows = grid.getElementsByTagName("TR");
                var amount = 0;
                for (var i = 1; i < rows.length; i++) {
                    var cells = rows[i].getElementsByTagName("TD");
                    amount += parseFloat(cells[2].innerHTML);
                }
                $('[id*=txtSum]').val(amount);
            });
        });
    </script>
    <table id="tblcoursesubject">
        <tr>
            <th>Name</th>
            <th>Phone</th>
            <th>Amount</th>
        </tr>
        <tr>
            <td>A</td>
            <td>112</td>
            <td>25.25</td>
        </tr>
        <tr>
            <td>B</td>
            <td>222</td>
            <td>78.63</td>
        </tr>
        <tr>
            <td>C</td>
            <td>4444</td>
            <td>14</td>
        </tr>
    </table>
    <input id="btnEditForAddorg" type="button" value="+ADD " runat="server" class="btncss2" />
    <br />
    Sum :
    <input type="text" name="name" id="txtSum" />
</div>

Demo