JQuery, total table

Question

JQuery, total table

Navigation

#1 by (2 votes)

0

I am not able to generate an overall total of my table, in each row I have the quantity and price. I need to generate the total value.

The current logic is reading all the rows of the table and accumulating the total of the rows. The problem is in the first line that returns undefined that generates a NaN (Not a number), the others are being loaded correctly.

<table class="table" id="table">
        <thead>
            <tr><th>Código</th>
            <th>Descrição</th>
            <th style="width: 10%;">Quantidade</th>
            <th>Preço</th>
            <th>Valor total</th>
            <th>Ação</th>
            </tr></thead><tbody>

                <tr>
                    <td>1</td>
                    <td>Processador I7</td>
                    <td><input class="form-control quantidade" id="id_form-0-quantidade" min="0" name="form-0-quantidade" oninput="atualizarDinamico1(this)" type="number" value="6"></td>
                    <td><input class="form-control preco" id="id_form-0-preco" name="form-0-preco" oninput="atualizarDinamico1(this)" step="0.01" type="number" value="150.00"></td>
                    <td>900.00</td>
                    <td><span id="form-0-DELETE" class="total"></span></td>
                    <td class="text-center">
                            <button value="on" type="submit" name="form-0-DELETE" class="btn btn-danger btn-sm">
                            <span class="glyphicon glyphicon-trash"></span> Excluir</button>
                            <input id="id_form-0-id" name="form-0-id" type="hidden" value="1">
                    </td>
                </tr>

                <tr>
                    <td>5</td>
                    <td>Teclado Dell</td>
                    <td><input class="form-control quantidade" id="id_form-1-quantidade" min="0" name="form-1-quantidade" oninput="atualizarDinamico1(this)" type="number" value="1"></td>
                    <td><input class="form-control preco" id="id_form-1-preco" name="form-1-preco" oninput="atualizarDinamico1(this)" step="0.01" type="number" value="105.00"></td>
                    <td>105.00</td>
                    <td><span id="form-1-DELETE" class="total"></span></td>
                    <td class="text-center">
                            <button value="on" type="submit" name="form-1-DELETE" class="btn btn-danger btn-sm">
                            <span class="glyphicon glyphicon-trash"></span> Excluir</button>
                            <input id="id_form-1-id" name="form-1-id" type="hidden" value="22">
                    </td>
                </tr>

                <tr>
                    <td>4</td>
                    <td>Mouse XPTO</td>
                    <td><input class="form-control quantidade" id="id_form-2-quantidade" min="0" name="form-2-quantidade" oninput="atualizarDinamico1(this)" type="number" value="1"></td>
                    <td><input class="form-control preco" id="id_form-2-preco" name="form-2-preco" oninput="atualizarDinamico1(this)" step="0.01" type="number" value="120.00"></td>
                    <td>120.00</td>
                    <td><span id="form-2-DELETE" class="total"></span></td>
                    <td class="text-center">
                            <button value="on" type="submit" name="form-2-DELETE" class="btn btn-danger btn-sm">
                            <span class="glyphicon glyphicon-trash"></span> Excluir</button>
                            <input id="id_form-2-id" name="form-2-id" type="hidden" value="23">
                    </td>
                </tr>

            </tbody>

    </table>

Script:

  $("#myBtn1").click(function(){
    var total = 0
    $("#table tr").each(function(){
         var currentRow=$(this);
         var qtd=currentRow.find(".quantidade").val();
         var preco=currentRow.find(".preco").val();

         total = total + (parseFloat(qtd) * parseFloat(preco));

         console.log(qtd);
         console.log(preco);

    });
    console.log(total);
});

Console:

(index):319 undefined
(index):320 undefined
(index):319 6
(index):320 150.00
(index):319 1
(index):320 105.00
(index):319 1
(index):320 120.00
(index):323 NaN

jquery django-templates

asked by anonymous 15.04.2017 / 06:17

1 answer

Format GridView Time Help with field to save a link

score 2 · Accepted Answer

Your problem occurs because of these lines:

$("#table tr").each(function() {

This instruction traverses all rows in the table - including the first row of the header, which has no values for quantity or price.

var qtd=currentRow.find(".quantidade").val();
var preco=currentRow.find(".preco").val();

total = total + (parseFloat(qtd) * parseFloat(preco));

Already in this section you try to get the values of the inputs, regardless of whether they exist or not.

Here are two fixes for your code:

1) Search only in the body of the table

$("#table tbody tr").each(function() {

2) Sanitize values undefined to be considered 0.

So, if there's any other reason why there's no value in a line, that reason will not break your calculation:

var qtd = parseFloat(currentRow.find(".quantidade").val() || 0);
var preco = parseFloat(currentRow.find(".preco").val() || 0);

total += qtd * preco;