Sum Column HTML Table

Asked

Viewed 471 times

0

how to perform the automatic sum of a specific column? I tried with the script below using Jquery, but without success. The total value in the column to be filled is in the last . (space is blank).

<!DOCTYPE html>
<html lang="pt-br">
<head>

    <meta charset="UTF-8">
    <title>Minha Vida</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src=""></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script>
        $(document).ready(function() {
            $('table thead th').each(function(i) {
                calculateColumn(i);
            });
        });

        function calculateColumn(index) {
            var total = 0;
            $('table tr').each(function() {
                var value = parseInt($('td', this).eq(index).text());
                if (!isNaN(value)) {
                    total += value;
                }
            });
            $('table tfoot td').eq(index).text('Total: ' + total);
        }
    </script>

</head>

<body>

        <table id="sum_table" style="width:50%" align="center">

            <tr bgcolor="#FFFF00" class="header-table">
                <th>Corretora</th>
                <th>Ação</th>
                <th>Qtde</th>
                <th>Valor</th>
            </tr>

            <tr>
                <td><img src="imagens/rico-corretora-logo.jpg" width="100" /></td>
                <td>ODPV3</td>
                <td>100</td>
                <td>2.000</td>
            </tr>
            <tr>
                <td><img src="imagens/rico-corretora-logo.jpg" width="100" /></td>
                <td>WEGE3</td>
                <td>100</td>
                <td>1.800</td>
            </tr>
            <tfoot>
                <tr>
                    <th colspan=3>Total Investido</th>
                    <td></td>
                </tr>
            </tfoot>
        </table>

</body>
</html>
jquery html5

1 answer

0


Good afternoon, I made some modifications to html and javascript and it worked. In HTML I added thead and tbody, and in js I left everything in function ready:

<!DOCTYPE html>
<html lang="pt-br">
<head>

    <meta charset="UTF-8">
    <title>Minha Vida</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src=""></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script>
        var total = 0;
        $(document).ready(function() {
            $('table tbody tr').each(function() {
                total += parseFloat(this.children[3].innerHTML);
            });
            $('table tfoot td').text('Total: ' + total);
        });
    </script>

</head>

<body>

        <table id="sum_table" style="width:50%" align="center">
            <thead>
                <tr bgcolor="#FFFF00" class="header-table">
                    <th>Corretora</th>
                    <th>Ação</th>
                    <th>Qtde</th>
                    <th>Valor</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><img src="imagens/rico-corretora-logo.jpg" width="100" /></td>
                    <td>ODPV3</td>
                    <td>100</td>
                    <td>2.000</td>
                </tr>
                <tr>
                    <td><img src="imagens/rico-corretora-logo.jpg" width="100" /></td>
                    <td>WEGE3</td>
                    <td>100</td>
                    <td>1.800</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th colspan=3>Total Investido</th>
                    <td></td>
                </tr>
            </tfoot>
        </table>

</body>
</html>

Browser other questions tagged jquery html5

You are not signed in. Login or sign up in order to post.