How To Get HTML Table Column Values SUM In Javascript [ with source code ]

In This Javascript Tutorial we will See How To Get The Total Sum Of An HTML Table Column Values using JS And Netbeans Editor .

Subscribe : https://www.youtube.com/channel/UCS3W5vFugqi6QcsoAIHcMpw

Project Source Code:


<!DOCTYPE html>

<html>
    <head>
        <title>Javascript HTML Table - Sum</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
       
        <table id="table" border="1">
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Value</th>
            </tr>
            <tr>
                <td>A1</td>
                <td>B1</td>
                <td>43</td>
            </tr>
            <tr>
                <td>A2</td>
                <td>B2</td>
                <td>28</td>
            </tr>
            <tr>
                <td>A3</td>
                <td>B3</td>
                <td>15</td>
            </tr>
            <tr>
                <td>A4</td>
                <td>B4</td>
                <td>50</td>
            </tr>
            <tr>
                <td>A5</td>
                <td>B5</td>
                <td>31</td>
            </tr>
            <tr>
                <td>A6</td>
                <td>B6</td>
                <td>85</td>
            </tr>
            <tr>
                <td>A7</td>
                <td>B7</td>
                <td>18</td>
            </tr>
        </table>
        <span id="val"></span>
        
        <script>
            
            var table = document.getElementById("table"), sumVal = 0;
            
            for(var i = 1; i < table.rows.length; i++)
            {
                sumVal = sumVal + parseInt(table.rows[i].cells[2].innerHTML);
            }
            
            document.getElementById("val").innerHTML = "Sum Value = " + sumVal;
            console.log(sumVal);
            
        </script>
        
    </body>
</html>

#js #javascript