0

Tenho uma página HTML com um formulário e uma tabela, preciso inserir informações neste pequeno formulário e mostrar na tabela utilizando apenas JavaScript, porém não estou conseguindo.

O arquivo JavaScript é externo, como mostro na minha página HTML abaixo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Formulario </title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <br/>
    <br/>

    <div class="row">
      <div class="col-md-12">
        <div class="container">
          <!-- Formulario -->
          <form role="form">
            <div class="form-group">
              <label for="nome">Nome:</label>
              <input type="email" class="form-control" id="nome">
            </div>
            <div class="form-group">
              <label for="sobrenome">Sobrenome:</label>
              <input type="text" class="form-control" id="sobrenome">
            </div>
            <div class="form-group">
              <label for="telefone">Telefone:</label>
              <input type="text" class="form-control" id="telefone">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
          </form> <!-- /Formulario -->
        </div>
      </div>
    </div>
    <br/>
    <br/>
    <div class="row">
      <div class="col-md12"> 
        <div class="container">
          <table class="table">
            <thead>
              <th> Nome:      </th>
              <th> Sobrenome: </th>
              <th> Telefone:  </th>  
            </thead>
            <tbody>
              <tr>
                <td> Bla </td>
                <td> Bla </td>
                <td> Bla </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/script.js"></script>
  </body>
</html>

Gostaria de colocar a codificação JavaScript no arquivo script.js, que esta linkado na página HTML.

Já tentei guardar as informações do form em variável e em array de objetos no JavaScript, porém na hora de exibir nada acontece.

Alguém tem alguma ideia de como fazer?

2
  • Seja bem-vindo, Rafael. Coloque também o codigo do script.js. 17/02/2016 às 13:33
  • Olá Pablo, obrigado! Não tinha nada no arquivo script.js, como tinha guardado somente as informações variaveis achei que não seria útil. De qualquer modo agora já tenho uma ideia do que fazer. Obrigado pela atenção!! 17/02/2016 às 15:10

1 Resposta 1

0

Rafael, primeiro você vai precisar de uma modelo para os seus dados, para o seu caso poderia ser usado o seguinte modelo:

{
  Nome: "",
  Sobrenome: "",
  Telefone: ""
}

a segunda parte seria definir um template e a estrategia para montar o template... você pode usar <template> do HTML5, montar o HTML na mão, ou usar alguma template engine como Mustache ou Handlebars.

Segue um exemplo de template do Handlebars:

<script type="text/template">
    <tr>
        <td>{{Nome}}</td>
        <td>{{Sobrenome}}</td>
        <td>{{Telefone}}</td>
    </tr>
</script>

basicamente um HTML convencional onde coloco marcações para identificar onde será inserido os dados do modelo.

var tabela = document.querySelector(".table tbody");

// inicializando o template.
var tmplSource = document.getElementById("tmplLinha").innerHTML;
var tmplHandle = Handlebars.compile(tmplSource);

faker.locale = "pt_BR";
for (var indice = 0; indice < 20; indice++) {
  // estou utilizando o faker apenas para gerar dados falsos.
  // montando modelo de dados;  
  var pessoa = {};
  pessoa.Nome = faker.name.firstName();
  pessoa.Sobrenome = faker.name.lastName();
  pessoa.Telefone = faker.phone.phoneNumber();

  // preparando fragmento HTML.
  var linha = {};
  linha.template = document.createElement("template");;  
  linha.template.innerHTML = tmplHandle(pessoa)
  linha.content = document.importNode(linha.template.content, true);

  // inserindo linha na tabela.
  tabela.appendChild(linha.content);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.0.1/faker.js"></script>
<table class="table">
  <thead>
    <th>Nome</th>
    <th>Sobrenome</th>
    <th>Telefone</th>  
  </thead>
  <tbody>

  </tbody>
</table>
<script id="tmplLinha" type="text/template">
  <tr>
    <td>{{Nome}}</td>
    <td>{{Sobrenome}}</td>
    <td>{{Telefone}}</td>
  </tr>
</script>

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 .