CRIAÇÃO DE TABELA

Fala ai Wilson, tudo bem? Seria interessante você mostrar cada informação em tabelas diferentes, por exemplo.

Em uma tabela você lista os produtos, ao clicar no produto, você lista outra tabela com os representantes e ao clicar em algum representante mostra os telefones.

Isso seria uma das maneiras, precisa ver como ficaria o visual/usabilidade.

Espero ter ajudado.

Apesar do conteúdo de alta qualidade esse é o problema da Alura. É muito difícil tirar dúvidas. Tudo fica por conta do aluno descobrir as coisas. Somente duvidas simples são sanadas. Ter apenas um canal de Fórum para escrever dúvidas é improdutivo. Existe um abismo entre o que é a minha dúvida, o que eu escrevo sobre ela, o que professor entende que eu escrevi e a resposta que o professor consegue escrever da melhor forma que ele acha que vai ajudar. Depois disso tudo eu ainda tenho que interpretar a resposta. Não é uma reclamação com sua resposta mas uma coisa que a Alura enquanto escola precisa melhorar. A resposta talvez faça sentido para algum aluno mais avançado, para mim, que sou básico do básico continua confuso.

Tem algum curso na plataforma que eu possa fazer sobre tabelas HTML? Algo que possa nortear a minha linha de raciocínio? Será que eu preciso reformular minha pergunta.

Fala Wilson, na verdade eu diria que esse é o processo de dúvidas, a gente vai conversando até saná-las, pode ser que as vezes uma resposta seja suficiente, pode ser que outras vezes sejam necessários 10 ou mais respostas.

E como você disse, a resposta pode fazer sentido para um aluno mais avançado ou não, mas, a gente não sabe o nível de conhecimento das pessoas (não é porque ela fez um curso de introdução que conhece pouco ou que fez um curso avançado que conhece muito), sendo assim, as vezes uma resposta pode resolver o problema e dúvida e outras vezes precisem de mais.

A gente pode entender algo errado ou as vezes pode faltar detalhes e informações na criação da dúvida.

Sendo assim, quando esse tipo de situação ocorrer, você poderia dizer o que não entendeu da resposta, o que não fez sentido, o que ainda não viu, dessa maneira a gente vai conversando para que no final você tenha a mesma resolvida.

Vamos lá, sobre a resposta: Imagine que você teria uma tabela (table) na página com as informações dos produtos, algo parecido com:

<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>Descrição</th>
            <th>Valor</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Iphone 6</td>
            <td>R$ 1500,00</td>
        </tr>
    </tbody>
</table>

No caso o id seria um valor único entre os produtos, por exemplo: 1, 2, 3, 4, etc...

Ele serve como identificador para o mesmo.

Cada linha da tabela (tr) você adicionaria um evento, dessa maneira, quando o usuário clicar com o mouse sobre alguma linha, você quer disparar uma função no JavaScript.

• Exemplo de tabela ouvindo o clique nas linhas

Repare no exemplo que ao clicar em alguma linha, a mesma é selecionada.

Essa função, iria pegar o id do produto ao qual a linha foi clicada e criaria outra tabela, com as informações do representante, algo assim:

<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>Nome</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>João</td>
        </tr>
    </tbody>
</table>

Essa tabela de representante também teria um evento para quando alguma linha seja clicada com o mouse e faria um processo parecido, porém, ao invés de criar uma nova tabela de representantes seria uma de telefones.

<table>
    <thead>
        <tr>
            <th>Telefone</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>3891-3891</td>
        </tr>
    </tbody>
</table>

Isso seria uma das maneiras de implementar essa funcionalidade, essa abordagem vai exigir lidar com eventos e manipulação da página em JavaScript.

Você também pode fazer isso via CSS, imagine que as linhas das tabelas seria expandíveis, quando você clicar em alguma linha, você abre um conteúdo e esse conteúdo poderia conter os representantes e seus telefones, algo assim:

• Exemplo com a linha expandindo

Parece complexo essas soluções pois exigem mais conhecimento de JavaScript, mas vai com calma, fazendo os cursos, que logo esses assuntos serão abordados e ensinados.

E existem outras N maneiras de resolver esse problema, caso nenhum dessas duas faça sentido para você a gente vai conversando. E caso eu tenha entendido a dúvida errada, por favor me explique com mais detalhes.

Obs: A parte de pesquisa faz parte do aprendizado, nenhum curso vai conseguir nos ensinar tudo que precisamos para resolver nossos problemas, nos desenvolvedores pesquisamos soluções todo dia, faz parte do dia-a-dia. Alguns cursos inclusive, por exemplo a Udacity, eles ensinam como pesquisar e procurar dúvidas na internet.

Espero ter ajudado.

Matheus eu compreendo e concordo com tudo o que vc falou mas o propósito da Alura é ensinar via EAD e somente o fórum torna o processo precário. A troca faz parte do aprendizado. Sem falar na demora que o fórum apresenta. Eu estou tentando ao máximo aproveitar essa quarentena. Não vou ter outra oportunidade de parar minha rotina para estudar. Eu consegui resolver depois de um dia inteiro mas será que é necessário tanto tempo? Conteúdo por conteúdo tem na internet de graça. O aluno precisa de suporte é parte fundamental do aprendizado. Delegar toda a responsabilidade de aprendizado ao aluno é dizer que o professor é desnecessário. Agora eu estou com outro problema no appendChild. De qualquer forma vou ler e estudar toda a sua resposta pois o erro pode estar na construção da minha tabela. Muito obrigado.

Fala Wilson, concordo contigo, estamos trabalhando cada vez mais para melhorarmos, esses feedbacks são muito importante para a gente.

Qual problema você está tendo com o appendChild? Me manda os códigos e o erro gerado no console do navegador.

No Windows você pode apertar o F12, ele vai abrir o console.

Se quiser, compartilha o projeto completo, sobe ele no Google Drive (zipado).

Assim eu consigo simular o problema por aqui e analisá-lo com mais calma.

Vamos conversando e trocando mensagens que a gente vai resolvendo os problemas e tirando as dúvidas que forem surgindo.

Espero ter ajudado.

Oi Matheus, eu já abri um forum com essas informações com exceção do CSS. Não sei se vc consegue localizar. Obrigado.

Matheus, não sei se eu fiz certo.

link do projeto https://drive.google.com/file/d/1g3HZQIEQmGifzp8BoQ1h-G_kihdWxh6U/view?usp=sharing

Fala Wilson, acho que resolvemos o problema na outra dúvida né? https://cursos.alura.com.br/forum/topico-dificuldades-no-append-chield-112657.

Sempre que precisar não deixe de ir criando suas dúvidas.

Abraços e bons estudos.