2

Tenho seguinte estrutra abaixo de HTML,gostaria de saber, como faço ao clicar no button,consigo pegar valor do elemento da td class="descricao" anteior que dentro do escopo da tr.

<tr>
    <td class="descricao">Texto01</td>
    <td class="btn-l"><button type="button">Leitura Confirmada</button></td>
</tr>
<tr>
    <td class="descricao">Texto02</td>
    <td class="btn-l"><button type="button">Leitura Confirmada</button></td>
</tr>
<tr>
    <td class="descricao">Texto02</td>
    <td class="btn-l"><button type="button">Leitura Confirmada</button></td>
</tr>

2 Respostas 2

4

Você vai usar:

Exemplo:

$('[type=button]').on('click', function() {
    let descricao = $(this).closest('tr').find('.descricao').text();
    console.log(descricao);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<table>
    <tr>
        <td class="descricao">Texto01</td>
        <td class="btn-l"><button type="button">Leitura Confirmada</button></td>
    </tr>
    <tr>
        <td class="descricao">Texto02</td>
        <td class="btn-l"><button type="button">Leitura Confirmada</button></td>
    </tr>
    <tr>
        <td class="descricao">Texto03</td>
        <td class="btn-l"><button type="button">Leitura Confirmada</button></td>
    </tr>
</table>

2
  • Até realizei implementação sugeridas,contudo me torna todos elementos das TR dentro da tag tabela.Não estou executando fução atravé do click. Código: var descricaoDoc = $('[type=button]').closest('tr').find('td.descricao').text();
    – Rafael Luz
    29/11/2018 às 16:11
  • Sim, é o esperado mesmo. Você está selecionando todos os botões e buscando todas as descrições. Se você usar no click como eu usei, vai pegar apenas a descrição da tr do botão clicado. Por isso o $(this), pois se refere ao botão clicado apenas, e não todos os outros. 29/11/2018 às 16:26
0

    $('button').on('click', function() {
        el = $(this).closest('tr').children('td.descricao');
        el.css('background-color', 'lightgreen');
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr>
        <td class="descricao">Texto01</td>
        <td class="btn-l"><button type="button">Leitura Confirmada</button></td>
    </tr>
    <tr>
        <td class="descricao">Texto02</td>
        <td class="btn-l"><button type="button">Leitura Confirmada</button></td>
    </tr>
    <tr>
        <td class="descricao">Texto03</td>
        <td class="btn-l"><button type="button">Leitura Confirmada</button></td>
    </tr>
</table>

3
  • 1
    O closest não vai funcionar porque td.descricao não é parent do button em nenhum nível. 29/11/2018 às 13:46
  • Li errado, agora está concertado. 29/11/2018 às 13:51
  • 1
    Desculpa ser chato, mas td.descricao é sibling do parent do button e não do button em si. :| 29/11/2018 às 13:51

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 .