1

tenho o código abaixo que pega deve pegar os valores de um TexBox dentro de uma tabela que é gerada dinamicamente por outra função JQuery. O Problema é que esse código sempre traz o valor do TextBox da primeira linha.

$('#tbl').on('focusout', '.vlr', function(event){
    var $qtd = $('tr').find('.qtda').val();
    var $valor = $('tr').find('.vlr').val();
    if ($qtd > 0 && $qtd != "") {
        if ($valor > 0 && $valor != "") {
            var $total = $qtd * $valor;
            $('.vlrTotal').closest().text($total)
        }
        else {
            $('.vlr').val('0');
        }
    }
    else {
        $('.vlr').val('0');
    }
})

Editado:

Código da função que gera a tabela:

function Pesquisar(){
    $('.corpoTbl').remove();
    $.ajax({
        url: "/RCM/ListarMateriais",
        type: "POST",
        data: { nome: $('#Pesquisar').val() },
        datatype: 'json',
        success: function (data) {
            $.each(data, function (I, item) {
                $('#tbl').append("<tr class=\"corpoTbl\"> <td class=\"ids\">" + item.ID + "</td><td id=\"nome\">" + item.Nome + "</td><td id=\"unidade\"><center>" + item.Unidade +
                    "</center></td><td> <center><input class=\"qtda\" type=\"text\" value=\"0\" style=\"width: 50px;\" /></center></td><td> " +
                    "<center><input class=\"vlr\" type=\"text\" value=\"0\" style=\"width: 50px;\" /></center> </td><td class=\"vlrTotal\"></td><td> <center><i class=\"icon-plus\"></i></center> </td></tr>")
            })
        }
    });
}
3
  • teria como postar o html da tabela gerada? caso contrario adiciona uma classe no textbox. e pega ele utilizando $('.suaclasse') isso vai retornar um array com todos os elementos que contém essa classe.
    – leonardo
    24/10/2014 às 18:11
  • Leonardo, eu adicionei o código que gera a tabela. 24/10/2014 às 18:20
  • Já tentou isso? $("#tbl tr td input.qtda")
    – leonardo
    24/10/2014 às 18:24

2 Respostas 2

2

O seu problema está aqui:

$('#tbl').on('focusout', '.vlr', function (event) {
    var $qtd = $('tr').find('.qtda').val();
    var $valor = $('tr').find('.vlr').val();

Os seletores estão a procurar sem relação com o elemento que disparou o evento focusout, e estão a retornar o primeiro elemento do DOM que encontram.
Tem de usar o .closest() para encontrar o tr que é pai/ancestral deste elemento .vlr que teve o focusout. A segunda linha $valor vejo no seu HTML que é o mesmo que tem a classe do elemento delegado. Ou seja pode simplificar e usar var $valor = this.value;

O novo código poderia ser:

$('#tbl').on('focusout', '.vlr', function (event) {
    var $qtd = $(this).closest('tr').find('.qtda').val();
    var $valor = this.value; // vejo no HTML que procura o valor do elemento que teve o focusout
2

Quando você chama o .val(), você sempre pega o valor do primeiro elemento retornado pelo find(). O método find() retorna uma lista de elementos, para iterar você precisa fazer:

var $listaDeValores ={};
$('tr').find('.vlr').each(function(){
  //Aqui eu itero sobre cada elemento com classe vlr dentro de cada tr...
  listaDeValores.push($(this).val());
});

No final, você teria uma lista com os valores.

No seu caso, acho que nem seria necessário o $('td').find('.vlr').

Poderia chamar direto o $('.vlr').each()

Referência:

http://api.jquery.com/each/

Espero ter ajudado!

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 .