Insert information into a table with JavaScript

Question

Insert information into a table with JavaScript

Navigation

#1 by (0 votes)

0

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

The JavaScript file is external, as I show 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><scriptsrc="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><scriptsrc="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 store form information in variable and object array in JavaScript, but at the time of displaying nothing happens.

Does anyone have any idea how to do it?

javascript

asked by anonymous 17.02.2016 / 14:19

1 answer

How to execute a .jar using java jdbc on another machine problems with web service Jquery + VRaptor 4 "status of 404"

score 0 · Accepted Answer

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

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

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

Here is an example Handlebars template:

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

basically a conventional HTML where I put tags to identify where the template 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><scriptsrc="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>