Como resolver este Exercicio de JAVASCRIPT?

Front-end
, , ,
#1

A descrição do exercicio é essa:

  1. Fazer uma página na qual o usuário entre com vários nomes, quantos ele desejar e um de cada vez. Montar uma tabela onde cada um dos nomes digitados pelo usuário deve estar em uma linha da tabela juntamente com um índice. O índice deve iniciar em um e incrementar de um em um. Para entrar com os parâmetros use a janela de prompt do navegador. Para interromper as entradas basta acionar o botão “cancel”, com isso a janela de prompt irá retornar null. Formate as células de título da tabela usando os seguintes atributos: tamanho-da-fonte:15px, peso-da-fonte:700 e cor-de-fundo:#000033.Formate as demais células da tabela usando os seguintes atributos: tamanho-da-fonte:14px e cor-de-fundo:#000066. Todo o texto da tabela deve ter cor #CCCCCC e a tabela deve ter o atributo cor-de-fundo setado em #CCCCCC

Bem, a lógica do meu código está correta, porém na hora de exibir a lista, ele não traz os campos formatados com CSS, nao exibe minha tabela. Para vocês terem uma noção, se puderem executar esse código na maquina de vocês para terem a visão e tentarem me ajudar. Ficarei grato! Sou iniciante em Javascript

Meu Código:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Exercicio 01</title>
    
</head>
<script>
    
    
    window.onload = function(){
        var indice = 0;
        var i = 0;
        var name = "";
        var conteudo = "";
        
        
        while(name != null){
            i = i+1;
            var name = prompt("Insira o nome da Cidade");
            AdicionaInfo();
        }
        
        function AdicionaInfo(){
            indice = document.getElementById("i");
            nome = document.getElementById("nome");
            
            conteudo += indice.innerHTML= "<td>" + i + "</td>" + "\n";
            conteudo += nome.innerHTML= "<td>" + name + "</td>" + "\n";
            conteudo += "<br>";
                            
        } 
        
        
                   
        /* if(nome != null){
            alert("Ok");
        }else{
            alert("Cancelado");
        } */

    
}


</script>

<style>
         
    td  {
        font-size: 14px;
        font-weight: 700;
       background: #000066;
    color: white;
    font-family: arial;
    width: 186px;
    height: 20px;
    }
   
    th {font-size: 15px;
        font-weight: 700;
       background: #000033;
    color: white;
    font-family: arial;
    width: 186px;
    height: 20px;}
    


</style>
<body>
    <table border="1">
        <tr>
            <th>Índice</th>
            <th>Nome</th>            
        </tr>
        <tr>
            <td id="i">Índice</td>
            <td id="nome">Nome</td>            
        </tr>
    
    
    
    
    
    </table>
    
    
</body>
#2

Executei o seu exemplo e os campos estão aparecendo formatados, porém a lógica para adicionar as linhas esta errada, pois esta sobrescrevendo a linha que já existe com a ultima, para corrigir basta seguir este exemplo:

http://www.w3schools.com/jsref/met_table_insertrow.asp

#3

Fala mestrão, tranquilo?

Cara, não entendi sua explicação… e o link que o senhor me enviou está indisponível.
O senhor poderia detalhar melhor pra mim?

De qualquer forma, muito obrigado por tentar me ajudar.

Abraço !

#4

Bem o link parece estar ok, resumindo altere o método como abaixo e insira o id=“myTable” na tabela.

 function AdicionaInfo(){  
            var table = document.getElementById("myTable");
            var row = table.insertRow(0);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            cell1.innerHTML = name;
            cell2.innerHTML = i;
        }
#5

Cara, obrigado… me ajudou muito, eu criei um array, em vez de uma variavel pra relacionar os indices.

Você sabe como eu poderia inverter a ordem? porque tipo, o primeiro nome que eu coloco, ele vai jogando para baixo, e eu queria que aparecesse em cima, tentei o metodo cidade.reverse() fora das funções, mas por algum motivo nao está funcionando.

#6

http://www.w3schools.com/jsref/met_tablerow_insertcell.asp

vc pode especificar onde vc vai inserir. se sempre for inserir na posicao 0 vai ser numa direcao…

e vc sempre pode fazer o laço for inverso