Take a Textbox value from each row within the table with Jquery

Asked

Viewed 1,061 times

1

I have the code below that picks up should take the values of a Texbox within a table that is generated dynamically by another Jquery function. The problem is that this code always brings the Textbox value of the first line.

$('#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');
    }
})

Edited:

Code of the function generating the table:

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>")
            })
        }
    });
}
javascript jquery

  • would it be possible to post the html of the generated table? otherwise it adds a class in the textbox. and picks it up using $('.suaclass') this will return an array with all elements containing this class.

  • Leonardo, I added the code that generates the table.

  • Have you tried this? $("#tbl tr td input.qtda")

2 answers

2

When you call the .val(), you always take the value of the first element returned by find(). The method find() returns a list of elements, to iterate you need to do:

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

At the end, you would have a list of the values.

In your case, I don’t think it would even be necessary $('td').find('.vlr').

You could call right the $('.vlr').each()

Reference:

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

I hope I’ve helped!

2


Your problem is here:

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

Selectors are searching unrelated to the element that triggered the event focusout, and are returning the first element of the GIFT they find.
You have to use the .closest() to find the tr parent/ancestor of this element .vlr who had the focusout. The second line $valor I see in your HTML that it is the same that has the class of the delegated element. That is you can simplify and use var $valor = this.value;

The new code could be:

$('#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

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.