Insert information into a table with Javascript

Asked

Viewed 5,972 times

0

I have an HTML page with a form and a table, I need to insert information in this small form and show in the table using only Javascript, but I’m not getting.

The Javascript file is external, as shown in my HTML page below: 

<!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>

I would like to put the Javascript encoding in the script.js file, which is linked in the HTML page.

I have tried to save the form information in variable and object array in Javascript, but when displaying nothing happens.

Does anyone have any idea how to do?

javascript

  • Welcome, Rafael. Also enter the code of the script.js.

  • Hello Pablo, thanks! There was nothing in the script.js file, as I had saved only the variable information I thought would not be useful. Anyway now I have an idea of what to do. Thank you for your attention!!

1 answer

0


Rafael, first you will need a template for your data, for your case could be used the following template:

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

the second part would be to define a template and the strategy to assemble the template... you can use <template> HTML5, mount HTML in hand, or use some template engine like Mustache or Handlebars.

Follow an example of the Handlebars template:

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

basically a conventional HTML where I place marks to identify where the model data will be inserted.

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>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.