12

Eu tenho uma tabela dinâmica onde existe 9 colunas
Em uma das últimas colunas existe um botão de reprovação, e quando eu clicar nele, queria pegar o nome que está dentro de uma td na mesma tr dinamicamente.

SCRIPT

    $(document).on("click", ".btn-danger", function(){
        var nomePessoa = $(this).parent().parent().find("td").attr("nomePessoa");
        alert(nomePessoa);
    });


TABELA
inserir a descrição da imagem aqui

1
  • Acho que usar .closest('tr') é mais seguro do que .parent().parent() n vezes.
    – Sergio
    Commented 25/07/2014 às 23:38

5 Respostas 5

12

Para utilizar um atributo "personalizado" você deve utilizar o data-, montei um exemplo para você entender melhor.

HTML

<table>
    <tr>
        <td data-nome="Lorem Ipsum">Nome attr data-</td>
        <td><button class="btn-danger">Recuperar nome</button></td>
    </tr>
</table>

Note que criei o atributo data-nome será onde iremos armazenar o nome para capturar depois com o JQuery (código abaixo).

JQuery

$(function(){
    $(document).on('click', '.btn-danger', function(e) {
        e.preventDefault;
        var nome = $(this).closest('tr').find('td[data-nome]').data('nome');
        alert(nome);
    });
});

Créditos ao Sergio (otimização do código)

Você pode ver o exemplo funcionando nesta DEMO

3
  • Bem útil esta informação. Commented 25/07/2014 às 13:36
  • Diego, já que a sua resposta foi a aceite, se concordar mude/adicione .closest('tr') em vez de .parent().parent(). Assim evita uma chain de .parent() n vezes e a resposta fica melhor a meu ver. Outro problema que tem na sua resposta/exemplo é que ele não funciona com a tabela que o Tafarel mostrou. Se adicionar a primeira coluna que ele mostra o seu código não funciona (jsfiddle.net/4ZEx2/1). Mas se usar .find('td[data-nome]') ai já vai funcionar bem (jsfiddle.net/4ZEx2/2). Aí a minha sugestão seria assim: jsfiddle.net/4ZEx2/3
    – Sergio
    Commented 26/07/2014 às 0:29
  • 1
    @Sergio muito obrigado pelo toque, código alterado. Commented 29/07/2014 às 17:54
3

Consegui resolver colocando ao invés de um atributo, uma classe chamada "nome" no td com a informação de pessoa. O código ficou da seguinte forma:

    $(document).on("click", ".btn-danger", function(){
        var nomePessoa = $(this).parent().parent().find(".nome").text();
        alert(nomePessoa);
    });
2

Sugiro usar o .closest('tr') para subir no DOM até ao <tr> e depois usar o .find('td[nomePessoa]) para encontrar somente tdcom um atributo "nomePessoa".

Assim:

$(document).on("click", ".btn-danger", function () {
    var nomePessoa = $(this).closest('tr').find('td[nomePessoa]').attr('nomePessoa');
    alert(nomePessoa);
});

Deixo também um conselho, que é uma norma adotada na comunidade, use campos data-. Assim o seu código HTML seria <td data-nomePessoa="Antonio" ... etc e no javascript/jQuery .data('nomePessoa')em vez de .attr('nomePessoa')

0

Gostei da resposta do Diego Vieira(+1) pois não conhecia esse atributo data-qualquercoisa que pode ser criado.

No entanto, fui por um caminho diferente, pois vi que o nome já se encontrava escrito dentro da td e fui tentar pegá-lo com innerHTML. Não consegui com o código utilizado pois trata-se de um objeto JQuery e não é assim com .innerHTML que funciona a manipulação com Jquery. O Jquery cria um encapsulamento para conteúdo que é diferente de usar elemento = document.getElementById("iddoelmento");.

Daí me surgiu uma curiosidade: Como poderia fazer para pegar os nomes das propriedades e métodos de objetos de qualquer natureza, seja jquery ou não? Descobri a existência do Object.getOwnPropertyNames(nomedoobjeto) ao pesquisar no Stack Overflow em inglês.

No teste em questão o objeto localizado com Jquery tinha as seguintes propriedades: 0,1,length,prevObject,context,selector

Comecei testando o 0 e era o elemento que precisava. tdobj[0].innerHTML retorna o conteúdo da célula localizada.

Gostaria de compartilhar a experiência, segue o código executável abaixo.

$(function(){
    $(document).on('click', '.btn-danger', function(e) {
        e.preventDefault;
        //tdobj = $(this).parent().parent().find('td');
        tdobj = $(this).closest('tr').find('td');

        // lalala = Object.getOwnPropertyNames(tdobj);
	    // alert(lalala);
        //  0,1,length,prevObject,context,selector


        alert("[0]: "             + tdobj[0]);
        alert("[0].innerHTML:\n"  + tdobj[0].innerHTML);

        alert("[1]: "             + tdobj[1]);
        alert("[1].innerHTML:\n"  + tdobj[1].innerHTML);

        alert("length: "     + tdobj["length"]);

        alert("prevObject: " + tdobj["prevObject"]);

        alert("context: "    + tdobj["context"]);

        alert("selector: "   + tdobj["selector"]);

  
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
    <tr>
        <td>Teste Nome do Cara</td>
        <td><button class="btn-danger">Recuperar nome</button></td>
    </tr>
</table>

Referência: https://stackoverflow.com/questions/2257993/how-to-display-all-methods-of-an-object-in-javascript?answertab=active#tab-top

0
-1

Eu consegui retornar o resultado de uma forma mais simples.

determina um id dentro de cada e utiliza a função .text().

var tamanhopage = $("#tamanhopage").text();

Valor.

Funcionou pra mim aqui! Boa Sorte.

1
  • Agradecemos sua vontade de compartilhar conhecimento, mas isso não responde à pergunta. Sendo um usuário novo, recomendo que comece fazendo o tour para conhecer melhor o sistema. Em respostas futuras, tente explicar melhor o desenvolvimento, explicando o que cada função faz e, de preferência, citando a fonte das mesmas na documentação.
    – Woss
    Commented 6/05/2017 às 18:43

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 .