Soma de campo tablename

Boa tarde !

Galera estou com um novo problema no formulario do fluig.

Preciso retornar um somatorio de um tablename, a cada vez que o usuario incluir um a nova linha no tablename um campo precisa ser somado com o novo valor. Ex.: Tablename = "tb_produtos" Campos:

  1. Nome Produto | Valor Produto
    1. Arroz | 5,00
    2. Frango | 20,00
    3. Pizza | 40,00

Total : 65,00

Coloquei o TableName, mas não sei como faço para Somar esses valores.

Se alguem puder me ajudar eu agradeço desde já !!!

@Daniel, você pode colocar isso na função de adição:

Segue abaixo o HTML:


<!-- Botão para adicionar uma nova linha no Pai x Filho -->
<div class="row">
    <button type="button" class="btn btn-primary" name="btn_addProduto" id="btn_addProduto">Adicionar Produto</button>
</div>

<!-- Tabela Pai x Filho -->
<div class="row">
    <table class="table" id="tbProdutos" tablename="tbProdutos" noaddbutton=true>
        <thead>
            <tr>
                <th>Nome Produto</th>
                <th>Valor Produto</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="text" class="form-control" name="txt_nomeProduto" id="txt_nomeProduto">
                </td>
                <td>
                    <div class="input-group">
                        <div class="input-group-addon">R$</div>
                        <input type="text" class="form-control text-right" name="txt_valorProduto" id="txt_valorProduto">
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<!-- Campo com o valor Total dos Produtos -->
<div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <input type="text" class="form-control" name="txt_valorTotal" id="txt_valorTotal">
    </div>
</div>

Segue abaixo Javascript:


// Clique do botão para adicionar linha do Pai x Filho 
$("#btn_addProduto").on("click", function(e){
    wdkAddChild('tbProdutos');
    somaProdutos();
});

// Soma o valor de todos os produtos ao sair do campo do valor do produto
$("input[id^='txt_valorProduto___']").on("blur", function(){
    somaProdutos();
});

// função para fazer a soma dos valores de todos os produtos
function somaProdutos() {
    var soma = 0;
    // percorre todos os campos Pai x Filho
    $(document).on("blur", "input[id^='txt_valorProduto___']", function(e){
        soma = soma + parseFloat($(this).val());
    });

    // alimenta o campo Total com a soma dos valores dos produtos
    $("#txt_valorTotal").val(soma);
}

=========================================================================

FUNÇÃO CORRETA:


function somaProdutos() {
    var soma = 0;
    // dessa forma irá funcionar
    $(document).on("blur", "input[id^='txt_valorProduto___']", function(e){
        soma = soma + parseFloat($(this).val());
    });

    // alimenta o campo Total com a soma dos valores dos produtos
    $("#txt_valorTotal").val(soma);
}

FUNÇÃO QUE NÃO IRÁ FUNCIONAR:


function somaProdutos() {
    var soma = 0;
    // dessa forma NÃO irá funcionar
    // Como os campos são criados dinamicamente, dessa forma não irá funcionar
    $("input[id^='textValor_']").each(function(index, value){
        soma = soma + parseFloat($(this).val());
    });

    // alimenta o campo Total com a soma dos valores dos produtos
    $("#txt_valorTotal").val(soma);
}

Onde fica a programação do botão ???

Adicionei um exemplo na minha resposta.

Obrigado pela ajuda, seu exemplo funcionou ate a metade, o botão de adcionar funcionou perfeitamente, mas a soma não funciona, ele não entra na função pelo onBlur de jeito nenhum !

Alterei a função somaProdutos(), verifique se vai agora

@Daniel, deu certo agora?

Ainda não, não esta entrando no evento do onBlur, a função funciona perfeitamente, mas o evento não, nem entra no evento.

Mesmo depois da alteração que solicitei na função somaProdutos()?

a função funciona, o que não funciona é o evento onblur que chama a função !

Coloca aqui sua função somaProdutos

function somaProdutos() {
var soma = 0;
$(“input[id^=‘textValor___’]”).each(function(index, value){
soma = soma + parseFloat($(this).val());
alert(soma)
});

			    // alimenta o campo Total com a soma dos valores dos produtos
			    $("#txt_valorTotal").val(soma);
			}

Você não atualizou a função com a alteração que realizei.
No lugar de $("input[id^='textValor_']").each(function(index, value){ você coloca $(document).on("blur", "input[id^='txt_valorProduto___']", function(e){

mas a função funciona, o que não funciona é o evento $(“input[id^=‘textValor___’]”).blur(function(){

São comandos diferentes feitos em JQuery, teste dessa outra forma que te passei.
Testei aqui e funcionou

Da forma como eu passei primeiramente não irá funcionar pq esse campo é criado dinamicamente. Da outra forma que passei, vai funcionar pq é específico pra pegar os campos criados dinamicamente.

Depois da alteração que fiz, conseguiu testar?

@Daniel, conseguiu resolver seu problema?

Eu tive q fazer de outra forma.
chamei a função somaProdutos diretamente do evento do campo onBlur.

@Gabriel tem alguma forma de realizar essa soma de valores em campos de uma tabela pai e filho que tem máscara de valor (“#00.000.000.000.000,00”)?