Show Tabulated in a Table in HTML

Question

Show Tabulated in a Table in HTML

Navigation

#1 by (5 votes)
#2 by (2 votes)

2

My problem is as follows, I can only display the results in a alert , how would I put the values inside a table?

<title>-Calcular tabuada</title>
    <script type="text/javascript">
      <
      function calcula_tabuada() {
        var form = document.getElementById('form');
        var n = form.numero.value;
        if (n.match(/^[0-9]+$/)) {
          var num = parseInt(n);
          var resultado = 0;
          tabuada = "";
          for (operando = 1; operando < 11; operando++) {
            resultado = num * operando;
            tabuada = tabuada + num + " * " + operando + " = " + resultado + "\n";
          }
          alert(tabuada);
        } else {
          alert("Digite um número inteiro válido.");
        }
      }
      //-->
    </script>
  </head>
  <body>
    <form id="form" action="" method="get">
      <h3>Cálculo da tabuada utilizando for:</h3>
      <p>
        <label for="numero">Digite o número: </label>
        <input type="text" id="numero" name="numero" value="" />
      </p>
      <p>
        <input type="button" value="Calcular" onclick="return calcula_tabuada();" />
      </p>
    </form>
  </body>
</html>

html css

asked by anonymous 25.09.2015 / 00:34

2 answers

5

To accomplish what you want, you need to create a table in your html code and in your for , you add the values according to the multiplication.

Using your code as an example would look like this:

#myTable{
display: none;
}

 td {
   border: 1px solid black;
}

 <body>
    <form id="form" action="" method="get">
      <h3>Cálculo da tabuada utilizando for:</h3>
      <p>
        <label for="numero">Digite o número: </label>
        <input type="text" id="numero" name="numero" value="" />
      </p>
      <p>
        <input type="button" value="Calcular" onclick="return calcula_tabuada();" />
      </p>
    </form>
     
     <table id="myTable">
     <thead>
         <tr>
             <td>Nº</td>
             <td>Multiplicador</td>
             <td>Resultado</td>
         </tr>
     </thead>
         <tbody>
         </tbody>
     </table>
    
     <script>
        function calcula_tabuada() {
        var form = document.getElementById('form');
        var n = form.numero.value;
        var table = document.getElementById("myTable");
      
        if (n.match(/^[0-9]+$/)) {
          var num = parseInt(n);
          var resultado = 0;
          tabuada = "";
          for (operando = 10; operando > 0; operando--) {
            resultado = num * operando;
            var row = table.insertRow(1);//Seleciona a 1ª linha da tabela
            var cell1 = row.insertCell(0);//Insere td numero
            var cell2 = row.insertCell(1);//Insere td Multiplicador
            var cell3 = row.insertCell(2);//Insere td Resultado
            cell1.innerHTML = num;;//Valor do numero
            cell2.innerHTML = operando;;//Valor do Multiplicador
            cell3.innerHTML = resultado;;//Valor do Resultado
          }
          table.style.display = "block";//Torna a tabella visível
        } else {
          alert("Digite um número inteiro válido.");
        }
      }       
     </script>

P.S .: The code is explaining what it does in the code comment itself.

25.09.2015 / 02:23

How to secure a service site before launch? Create FTP access to a virtual directory on Azure

score 2 · Accepted Answer

It is not in a table but prints out of the alert:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>-Calcular tabuada</title>
	<script type="text/javascript">
   
	  function calcula_tabuada() {
		var form = document.getElementById('form');
		var n = form.numero.value;
		if (n.match(/^[0-9]+$/)) {
		  var num = parseInt(n);
		  var resultado = 0;
		  tabuada = "";

		  for (operando = 1; operando < 11; operando++) {
			resultado = num * operando;
			tabuada = tabuada + num + " * " + operando + " = " + resultado +  "<br>\n";
		  }
		  document.write(tabuada);
		} else {
		  alert("Digite um número inteiro válido.");
		}
	  }
 
	</script>
  </head>
  <body>
	<form id="form" action="" method="get">
	  <h3>Cálculo da tabuada utilizando for:</h3>
	  <p>
		<label for="numero">Digite o número: </label>
		<input type="text" id="numero" name="numero" value="" />
	  </p>
	  <p>
		<input type="button" value="Calcular" onclick="return calcula_tabuada();" />
	  </p>
	</form>
  </body>
</html>

What you really want is looking here already in the stackoverflow: Create PivotTable in JS to use in HTML . I hope I have helped !!