Como ler valores de caixa de texto do html e inseri-los em tabelas usando JavaScript-Exemplos de código

Radu TM

Como ler valores de caixa de texto do html e inseri-los em tabelas usando JavaScript

HTML por Radu TM June 12, 2022

<html>
<head>
  <script type="text/javascript">
    function insertValues(){
      //obter o valor do primeiro textboxâ
      var firstValue = document.getElementById('firstTextbox').value;

      //obter o valor do segundo textbox
      var secondValue = document.getElementById('secondTextbox').value;

      //obter o elemento da tabela
      var table = document.getElementById('myTable');

      //inserir os valores na tabela
      table.rows[0].cells[0].innerHTML = firstValue;
      table.rows[0].cells[1].innerHTML = secondValue;
    }
  </script>
</head>
<body>

  <!--Criar uma tabela com duas colunas.-->
  <table id="myTable" border="1">
    <tr>
      <td>Primeira coluna</td>
      <td>Segunda coluna</td>
    </tr>
  </table>

  <br/>

  <!--Criar dois textboxes.-->
  Primeiro Textbox: <input type="text" id="firstTextbox" /><br/>
  Segundo Textbox: <input type="text" id="secondTextbox" /><br/>

  <!--Criar um botão. Quando clicado, os valores dos textboxes serão inseridos na tabela.-->
  <input type="button" value="Inserir valores" onclick="insertValues();" />
</body>
</html>

0

45.563

Consultas relacionadas com JavaScript

Últimas consultas JavaScript

Explorar exemplos de código por categorias