0

Não estou conseguindo gerar um total geral da minha tabela, em cada linha eu tenho a quantidade e preço. Preciso gerar o valor total.

A lógica atual está lendo toda as linhas da tabela e acumulando o total das linhas. O problema está na primeira linha que retorna undefined que ger um NaN (Not a number), as demais estão sendo carregadas corretamente.

<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

1 Resposta 1

2

Seu problema ocorre por causa destas linhas:

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

Essa instrução percorre todas as linhas da tabela - inclusive a primeira linha do cabeçalho, que não possui valores para quantidade nem para preço.

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

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

Já neste trecho você tenta obter os valores dos inputs, sem se importar se existem ou não.

Seguem duas correções para o seu código:

1) Pesquisar somente no corpo da tabela

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

2) Sanitizar valores undefined para que sejam considerados 0.

Assim, caso haja qualquer outro motivo para que não haja valor em uma linha, esse motivo não irá quebrar seu cálculo:

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

total += qtd * preco;
3
  • Renan, perfeito. Solução excelente, esse item 2 eu não conhecia, show. Você poderia me informar como formatar esse total como moeda (R$ 999.999,99)? Valeu pela solução +1.
    – Developer
    15/04/2017 às 13:26
  • Eu uso uma biblioteca. Fazer essa formatação em Javascript não é tão simples, então eu sugiro abrir uma pergunta específica pra isso. 15/04/2017 às 13:33
  • Ok Renan, obrigado.
    – Developer
    15/04/2017 às 13:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .