Totalize column values of an HTML table with decimal result

Asked

Viewed 96 times

2

I need to display the total result by summing 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>

The script works in part, but I couldn’t get it to give me the full result with the decimal places(after the point).

  • As an answer, he returns to me: 40

  • When you should return to me: 41.48

At least that’s how I imagine it must be.

If you pull this in a matrix array, to interact between the indexes can be solved or I’m wrong?

Or it solves with just a few more arithmetic expression

javascript html table dom calculus
  • 1

    not just change the parseInt for parseFloat?

  • 1

    better than using the parseInt/Float is to use +: resultado += +linha[i].innerHtml;

  • @Marcelouchimura Your comment was made juz to the problem that has earned me the most as a TIP! I thank you since, ja.

1 answer

3


The function parseInt() returns any integer value you can extract from the string you are passed.

parseInt(10.50) // 10

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

In the loop for use the function Number or parseFloat and in the end 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 function Number() when your script is not concerned about the accuracy 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 how you use it.

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

Instead of using the function Number or parseFloat we could use the operator himself + to convert it into 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 it performs a different action depending on its context.

  • Grateful for your participation and concern in the explanation, getting objective and clear. It is an answer to the height of the question. I think I’m really out of some syntax and/or semantics like Number() and toFixed() I do not remember these methods, there is some link on the subject that can point me?

  • https://docs.microsoft.com/pt-br/scripting/javascript/reference/tofixed-method-number-javascript

  • https://msdn.microsoft.com/pt-br/library/dwab3ed2(v=vs.94). aspx

Browser other questions tagged javascript html table dom calculus

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