Totalize column values of an HTML table, with decimal result

Navigation
2

I need to display the total result by adding the values that contain the value column: 

            var linha=document.getElementsByClassName("calcular");
            var resultado=document.getElementById('total').innerHTML = 0;

            for (var i=0; i < linha.length; i++) {
                resultado += parseInt(linha[i].innerHTML);
            }

            document.getElementById("total").innerHTML = resultado;
        table {
            margin: 5px;
            float: left;
            width: 564px;
            padding: 6px;
            font-weight: bold;
            font-size: 10pt;
            color: white;
            text-align: center;
        }

        th {
            background-color: slateblue;
            color: white;
        }

        tr td {
            background-color: white;
            color: black;
            text-align: center;
        }
            <table>
                <tr>
                    <th>ID</th>
                    <th>NOME</th>
                    <th>VALOR</th>
                </tr>
                <tr>
                    <td>01</td>
                    <td>Beltrano</td>
                    <td class="calcular">10.50</td>
                </tr>
                <tr>
                    <td>02</td>
                    <td>Fulano</td>
                    <td class="calcular">05.98</td>
                </tr>
                <tr>
                    <td>03</td>
                    <td>Ciclano</td>
                    <td class="calcular">25.00</td>
                </tr>
                <tr>
                    <td> &nbsp; </td>
                    <td> &nbsp; </td>
                    <td> &nbsp; </td>
                </tr>
                <tr>
                    <td> TOTAL </td>
                    <td> &nbsp; </td>
                    <td id="total"> &nbsp; </td>
                </tr>
            </table>

Script works in part , but I could not get it to give me the total result with the decimal places (after the dot).

  • When should I get back: 41.48

At least this is how I imagine it should be.

If pulling this in a array array, to interact between indexes can you solve it or am I wrong?

Or this solves with just some arithmetic expression

    
asked by anonymous 02.06.2018 / 19:27

1 answer

3

The function parseInt() returns any integer value that can be extracted from the string passed to it. 

parseInt(10.50) // 10

so in loop for is summing the integer part of the returned strings

In the for loop, use the Number or parseFloat > and in the final result toFixed (2) 

 var linha=document.getElementsByClassName("calcular");
 var resultado=document.getElementById('total').innerHTML = 0;

     for (var i=0; i < linha.length; i++) {
         resultado += Number(linha[i].innerHTML);
     }

 document.getElementById("total").innerHTML = resultado.toFixed(2);
        table {
            margin: 5px;
            float: left;
            width: 564px;
            padding: 6px;
            font-weight: bold;
            font-size: 10pt;
            color: white;
            text-align: center;
        }

        th {
            background-color: slateblue;
            color: white;
        }

        tr td {
            background-color: white;
            color: black;
            text-align: center;
        }
<table>
                <tr>
                    <th>ID</th>
                    <th>NOME</th>
                    <th>VALOR</th>
                </tr>
                <tr>
                    <td>01</td>
                    <td>Beltrano</td>
                    <td class="calcular">10.50</td>
                </tr>
                <tr>
                    <td>02</td>
                    <td>Fulano</td>
                    <td class="calcular">05.98</td>
                </tr>
                <tr>
                    <td>03</td>
                    <td>Ciclano</td>
                    <td class="calcular">25.00</td>
                </tr>
                <tr>
                    <td> &nbsp; </td>
                    <td> &nbsp; </td>
                    <td> &nbsp; </td>
                </tr>
                <tr>
                    <td> TOTAL </td>
                    <td> &nbsp; </td>
                    <td id="total"> &nbsp; </td>
                </tr>
            </table>
  

Use the Number() function when your script is not concerned with the precision of the value and prefer to let the source string control whether the value is a floating-point number or an integer.

The + operator may surprise you, depending on the way you use it.

  • Everyone knows that the + operator serves for at least two things: adding numbers and concatenating strings!
  

Instead of using the function Number or parseFloat we could use the + itself to convert it to a number.

See how: 

resultado += +(linha[i].innerHTML);

Testing 

     var linha=document.getElementsByClassName("calcular");
     var resultado=document.getElementById('total').innerHTML = 0;

         for (var i=0; i < linha.length; i++) {
             resultado += +(linha[i].innerHTML);
         }

     document.getElementById("total").innerHTML = resultado.toFixed(2);
            table {
                margin: 5px;
                float: left;
                width: 564px;
                padding: 6px;
                font-weight: bold;
                font-size: 10pt;
                color: white;
                text-align: center;
            }

            th {
                background-color: slateblue;
                color: white;
            }

            tr td {
                background-color: white;
                color: black;
                text-align: center;
            }
    <table>
                    <tr>
                        <th>ID</th>
                        <th>NOME</th>
                        <th>VALOR</th>
                    </tr>
                    <tr>
                        <td>01</td>
                        <td>Beltrano</td>
                        <td class="calcular">10.50</td>
                    </tr>
                    <tr>
                        <td>02</td>
                        <td>Fulano</td>
                        <td class="calcular">05.98</td>
                    </tr>
                    <tr>
                        <td>03</td>
                        <td>Ciclano</td>
                        <td class="calcular">25.00</td>
                    </tr>
                    <tr>
                        <td> &nbsp; </td>
                        <td> &nbsp; </td>
                        <td> &nbsp; </td>
                    </tr>
                    <tr>
                        <td> TOTAL </td>
                        <td> &nbsp; </td>
                        <td id="total"> &nbsp; </td>
                    </tr>
                </table>
  

The plus + sign is considered overloaded, which means that it performs a different action, depending on its context.

    
02.06.2018 / 21:44
FileHelpers .NET CORE 2.0 Doubt over Recursion in a power method