2

Tenho que fazer um bingo onde, ao digitar um nome no campo e clicar no botão , o projeto gere uma tabela com o nome digitado e mais alguma colunas contendo números aleatórios. Eu estava tentando inserir tabelas, colunas e linhas na páginas, mas por algum motivo as colunas não são criadas, por favor me ajudem, aqui está o código:

<!DOCUMENT html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
    </head>

    <body>

        <input type="text" id="nome">
        <input type="button" name="Criar" value="Cadastrar" id="botao">


        <script> 
            var nome = window.document.getElementById('nome')
            var botao = window.document.getElementById('botao')
            botao.addEventListener('click',clicar_botao)

            function clicar_botao(){
                var elemento_bisavo = document.body;
                var elemento_avo = document.createElement('table');
                var elemento_pai = document.createElement('tr');
                var elemento_filho = document.createElement('th');
                var texto = document.createTextNode(nome.value);
                elemento_filho.appendChild(texto);
                elemento_bisavo.appendChild(elemento_avo);
                elemento_avo.appendChild(elemento_pai);
                elemento_pai.appendChild(elemento_filho);



            }
        </script>
    </body>
</html>

O objetivo é que os nomes diferentes(novos clicks no botão) fiquem na horizontal uns com os outros, mas eles ficam um abaixo do outro, como se fossem parte de uma lista e não de uma tabela.

4
  • Cara cada vez que vc digita um nome e clica no btn vc gera uma tabela nova, dessa forma uma fica abaixo da outra mesmo... qual seria o comportamento que vc deseja, que a cada tabela nova gerada fique uma ao lado da outra? E se forem 200 tabelas como fica?
    – hugocsl
    Commented 19/07/2019 às 18:15
  • Ata, vi agr isso das tabelas obg aí. O comportamento que eu quero é que fique uma ao lado da outra nesse caso, e a princípio é pra poder criar infinitas tabelas, segundo meu professor
    – Akali
    Commented 19/07/2019 às 18:29
  • Onde está o código que gera as colunas com os números?
    – Sam
    Commented 19/07/2019 às 18:31
  • essa parte eu n fiz ainda, tô querendo fazer a parta da geração das tabelas
    – Akali
    Commented 19/07/2019 às 18:34

1 Resposta 1

3

Cara faz assim então. Em vez de colocar as tablas direto jogada no document.body, cria um container com display:flex e cria as tabelas dentro desse container, assim vai ficar uma ao lado da outra.

inserir a descrição da imagem aqui

var nome = window.document.getElementById('nome')
var botao = window.document.getElementById('botao')
botao.addEventListener('click',clicar_botao)

function clicar_botao(){
  var elemento_bisavo = document.getElementById('container');
  var elemento_avo = document.createElement('table');
  var elemento_pai = document.createElement('tr');
  var elemento_filho = document.createElement('th');
  var texto = document.createTextNode(nome.value);
  elemento_filho.appendChild(texto);
  elemento_bisavo.appendChild(elemento_avo);
  elemento_avo.appendChild(elemento_pai);
  elemento_pai.appendChild(elemento_filho);
}
#container {
  display: flex;
  flex-wrap: wrap;
}
table {border: 1px solid black; margin: 10px;}
<input type="text" id="nome">
<input type="button" name="Criar" value="Cadastrar" id="botao">
<div id="container"></div>

3
  • Obrigado cara, só não entendi pra que serve esse flex-wrap, comecei a estudar autoria web esse semestre, só sei o básico do básico, mas me ajudou mt, vlw
    – Akali
    Commented 19/07/2019 às 18:47
  • 1
    @DanielLucas flex-wrap é para quando vc for colocando muitas tabelas elas vão "cair" para a linha de baixo quando chegar no final da janela. Da uma olhada na imagem do gif que editei para vc entender melhor
    – hugocsl
    Commented 19/07/2019 às 18:49
  • 1
    aaa, entendi, mt obrigado mais uma vez .
    – Akali
    Commented 19/07/2019 às 18:52

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 .