Export data from an array to a table on the same page using a javascript function?

Asked

Viewed 95 times

0

I want the form data to be printed in the following table when I press the insert button.

<tr>
    <th>Nome</th>
    <th>Data de Nascimento</th>
    <th>CPF</th>
    <th>RG</th>
    <th>Email</th>
    <th>Código de Acesso</th>
</tr>

Registration table

<form name="form1" onsubmit="return fasle">
    <table align="center">
        <h1 align="center">Exercicio</h1>
            <tr>
                <td> Nome: </td> <td> <input id="nomeID" /> </td>
            </tr>

            <tr>
                <td> Data de Nascimento: </td>  <td><input type="text" name="data" onKeyPress="MascaraData(form1.data);"
                maxlength="10" onBlur= "ValidaDataform1.data);"></td>
            </tr>

            <tr>
            <td> CPF:</td> <td> <input type="text" name="cpf" onBlur="ValidarCPF(form1.cpf);" onKeyPress="MascaraCPF(form1.cpf);" maxlength="14"/></td> 
            </tr>

            <tr>
                <td>RG:</td>    <td><input id="rgID" /></td>
            </tr>

            <tr>
                <td>Email:</td>     <td><input id="emailID" /> </td>
            </tr>
            <tr>
                <td>Código de acesso:</td>  <td><input  id="codigoID" /></td>
            </tr>
            <tr>
                <td>Senha:</td>     <td><input  id="senhaID" /></td>
            </tr>
            <tr>
                <td>Confirmação de senha:</td>      <td><input  id="confirmaID" /></td>
            </tr>
    </table>
    <div align="center">                                            
        <table >
            <tr>
                <td >
                    <button onclick="inserir()" type="submit">Inserir</button>
                </td>
            </tr>                                           
        </table>
    </div>
    <br>
        <table border="1" align="center">
            <caption></caption>
            <thead>
                <tr>
                <th>Nome</th> <th>Data de Nascimento</th> <th>CPF</th> <th>RG</th> <th>Email</th> <th>Código de Acesso</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td id="nome"></td> <td id="nascimento"></td>   <td id="cpf"></td> <td id="rg"></td>    
                    <td id="email"></td> <td id="codigo"></td>  
                </tr>

                <tr>
                    <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> 
                </tr>

                <tr>
                    <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> 
                </tr>

                <tr>
                    <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> 
                </tr>

                <tr>
                    <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> 
                </tr>

            </tbody>
        </table>
    </form>
</body>

  • You want to display the data in the table?

  • Adal, take a look at this fiddle I made some time ago: Jsfiddle

1 answer

0

Do you want to pass the values of txts to the correct table? See the example below (da para salvar num array, but since the question is only to pass the information, I did not implement.

function inserir() {

  nome = document.getElementById("nomeID").value;
  dtNasc = document.getElementById("data").value;
  cpf = document.getElementById("cpf").value;
  rg = document.getElementById("rgID").value;
  email = document.getElementById("emailID").value;
  codigo = document.getElementById("codigoID").value;

  var table = document.getElementById("linhas");

  var row = table.insertRow();

  var cell1 = row.insertCell();
  var cell2 = row.insertCell();
  var cell3 = row.insertCell();
  var cell4 = row.insertCell();
  var cell5 = row.insertCell();
  var cell6 = row.insertCell();

  cell1.innerHTML = nome;
  cell2.innerHTML = dtNasc;
  cell3.innerHTML = cpf;
  cell4.innerHTML = rg;
  cell5.innerHTML = email;
  cell6.innerHTML = codigo;
}
<form name="form1" onsubmit="return false;">
  <table align="center">
    <h1 align="center">Exercicio</h1>
    <tr>
      <td>Nome:</td>
      <td>
        <input id="nomeID" />
      </td>
    </tr>

    <tr>
      <td>Data de Nascimento:</td>
      <td>
        <input type="text" id="data" maxlength="10">

      </td>
    </tr>

    <tr>
      <td>CPF:</td>
      <td>
        <input type="text" id="cpf" maxlength="14" />
      </td>
    </tr>

    <tr>
      <td>RG:</td>
      <td>
        <input id="rgID" />
      </td>
    </tr>

    <tr>
      <td>Email:</td>
      <td>
        <input id="emailID" />
      </td>
    </tr>
    <tr>
      <td>Código de acesso:</td>
      <td>
        <input id="codigoID" />
      </td>
    </tr>
    <tr>
      <td>Senha:</td>
      <td>
        <input id="senhaID" />
      </td>
    </tr>
    <tr>
      <td>Confirmação de senha:</td>
      <td>
        <input id="confirmaID" />
      </td>
    </tr>
  </table>
  <div align="center">
    <table>
      <tr>
        <td>
          <button onclick="inserir()" type="submit">Inserir</button>
        </td>
      </tr>
    </table>
  </div>
  <br>

  <table id="tbCadastros" border="1" align="center">
    <thead>
      <tr>
        <th>Nome</th>
        <th>Data de Nascimento</th>
        <th>CPF</th>
        <th>RG</th>
        <th>Email</th>
        <th>Código de Acesso</th>
      </tr>
    </thead>
    <tbody id="linhas">
    </tbody>
  </table>
</form>

Browser other questions tagged

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