Get value of a TextBox on each line inside the table with JQuery

Question

Get value of a TextBox on each line inside the table with JQuery

Navigation

#1 by (2 votes)
#2 by (2 votes)

1

I have the code below that handle should get the values of a TexBox inside 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:

Function code that generates 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

asked by anonymous 24.10.2014 / 20:10

2 answers

2

When you call .val() , you always get the value of the first element returned by find() . The find() method 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 values.

In your case, I do not think you would even need $('td').find('.vlr') .

I could call the $('.vlr').each() direct

Reference:

link

I hope I have helped!

24.10.2014 / 20:37

Check a character pattern for login Do not display null value (01/01/0001) of a Datetime in a DataGridView

score 2 · Accepted Answer

Your problem is here:

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

The selectors are looking unrelated to the element that triggered the focusout event, and are returning the first element of the DOM they encounter. You must use .closest() to find tr that is parent / ancestor of this .vlr element that had focusout . The second line $valor I see in your HTML that it is the same as the class of the delegated element. In other words, 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