Tabela retratil com JS

Fala ai Raul, tudo bem? Nesse caso você vai precisar buscar todas as linhas que precisam ouvir esse evento de click e vincular um listener para ela.

Dessa forma, quando a linha for clicada você consegue navegar na coluna dela.

Algo assim:

const linhas = document.querySelectorAll('tr')
linhas.forEach(linha => {
    linha.addEventListener('click', event => {
        console.log(event.target.querySelector('td:nth-child(3)'))
    })
})

A ideia seria algo mais ou menos assim.

Espero ter ajudado.

Exemplo: Tenho 3 colunas numa tabela. 1º coluna tem um botao para mais detalhes; 2º coluna tem uma foto; 3º coluna tem dados como Nome, Rg, data de nascimento, estado civil,

Mas a 3 coluna atualmente mostra somente Nome e data de nascimento, o restante esta como display none. Ao clicar em + detalhes, gostaria que a coluna 3 mostrasse o restante do conteudo. Até ai tudo bem. Mas mesmo por exemplo... tenho 3 linhas na tabela... mesmo que eu coloque para percorrer todas as linhas e cada linha escutar o evento, quando eu clico nos botoes de cada linha, ele acaba sempre abrindo os detalhes somente da primeira linha. Entretanto, cada linha deveria abrir seu proprio detalhe.

Esse codigo resolveria?

Fala ai Raul, nesse caso você pode aplicar uma classe em todos os botões de ver detalhes e buscar todos eles para adicionar um listener de click:

const botoes = document.querySelectorAll('.classe-do-botao')
botoes.forEach(botao => {
    botao.addEventListener('click', event => {
        // faz algo
    })
})

Ai na parte do evento, você pode sair do botão, ir para a td (coluna) que ele se encontra e procurar a div que está escondida:

const botoes = document.querySelectorAll('.classe-do-botao')
botoes.forEach(botao => {
    botao.addEventListener('click', event => {
        // vai para a td
        const td = event.parentNode;
        const divEscondida = td.querySelector('.classe-div-escondida')
        if (divEscondida) {
            // faz algo com ela
        }
    })
})

A ideia seria mais ou menos isso.

Espero ter ajudado.

Obrigado, vou tentar desse jeito. Acho que vai dar certo, o problema maior era como dizer que o direcionar a reação do evento pro td certo. Tentei event.target.querySelectorAll mas não tinha dado certo.

Magina Raul, sempre que precisar não deixe de criar suas duvidas.

Abraços e bons estudos.

Preciso de mais uma ajuda, só que em Django rsrrss, fiz um post lá em Python Web no fórum. Mas ninguém respondeu rsrs e ainda não consegui encontrar uma soluçãoo. Você saberia me responder?

O titulo é:

Lista de Presença com Django

Fala Raul, infelizmente fico devendo kkk não tenho conhecimento de Django.

Abraços.

Obrigado assim mesmo. Até a próxima. hehehe