Soma de valores em Tabela

Boa tarde,

Preciso fazer a soma dos campos de uma tabela e exibir em um campo o Valor total.

Segue HTML

<div class="row">
                                        <div class="form-group col-md-4">
                                            <button type="button" class="btn btn-primary" name="btn_addDespesa" id="btn_addDespesa" onclick="wdkAddChild('tableDespesas');">Adicionar
                                                Despesa</button>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <table class="table" id="tableDespesas" tablename="tableDespesas" noaddbutton="true">
                                            <thead>
                                                <tr>
                                                    <th width="20%">Data</th>
                                                    <th width="50%">Tipo Gasto</th>
                                                    <th width="20%">Valor</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                   <td>
                                                        <input name="sol_txt_gasto_data" type="text" class="form-control sol_txt_gasto_data date" id="sol_txt_gasto_data" placeholder="data"  />
                                                    </td>
                                                    <td>
                                                        <input name="sol_txt_gasto_tipoGasto" type="text" class="form-control" id="sol_txt_gasto_tipoGasto" placeholder="Tipo Gasto"/>
                                                    </td>
                                                    <td>
                                                        <div class="input-group">
                                                            <div class="input-group-addon">R$</div>
                                                            <input type="text" class="form-control" name="txt_valor" id="txt_valor" onchange="somaProdutos()" />
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>                                
                                    <div class="row">
                                        <div class="form-group col-md-3">
                                            <label for="txt_valorTotal">Valor Total</label>
                                            <input type="text" class="form-control" name="txt_valorTotal" id="txt_valorTotal" readonly />
                                        </div>
                                    </div>

SCRIPT

function somaProdutos() {

    var soma = 0;
    var valor = $("input[id^='txt_valorProduto___']").each(function(index,value){
        $(this).val();
    });

     for (i=0; i< valor.length; i++){
        soma += parseFloat($(valor[i]).val());
        soma + valor
     }
     console.log(soma);


     document.getElementById('txt_valorTotal').value = soma.toLocaleString('pt-br', {minimumFractionDigits: 2});

}

O QUE OCORRE? Quando o campo faz a soma com valores pequenos, ele soma corretamente. Quando eu coloco um valor igual ou maior que 1.000, ele faz uma soma errada dos valores. Também preciso refazer a soma dos valores, toda vez que é excluída uma linha da tabela.

Podem me ajudar?

compartilhar
  • Esses valores têm separadores de milhar? Usam vírgula como decimal? Valores com máscara costumam ter problemas.

    Mausim   6 days ago
  • @mausim Tem sim!

    Karina Pinheiro   6 days ago
  • tenta deixar os valores digitados no padrão americano, assim o JS cálculo com mais facilidade. A table pai-filho, incrementa o index sempre no method addChild, quando uma linha é deletada a próxima não virá com o mesmo index e sim com o next. Ex.: row1, row2; row1 deletada; logo, a próxima será a row3. Isso atrapalha na hora de rodar o for para realizar os cálculos. No JS que tu postou, tu estás usando o $.each() e um for () {}, tu pode trabalhar dentro do próprio $.each().

    Wellington Silveira   6 days ago
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do fluig Forum!

1 resposta

Não é a resposta que estava procurando? Procure outras perguntas com as tags tabela ou faça a sua própria pergunta.