Show Tabulated in HTML Table

Asked

Viewed 3,787 times

2

My problem is this, I can only display the results in one alert, how I would 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
  • 6

    Then develop the page and when you are with some specific question, you put here for us to help you.

  • 1

    Okay, no problem. Thank you

  • 1

    @Guilhermelima completing what the bigown said, don’t misunderstand, but Stack Overflow is a website of doubts, not requests. Try something, in case of doubt, post your code, your attempt, then yes, many people will help you :).

  • Yes, I apologize it was innocence on my part, I updated my doubt.

  • 1

    I’m no good at manipulating DOM but I guess now who knows can answer.

2 answers

5

To accomplish what you want, you need to create a table in your code html and in his for, you add the values according to 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.

  • If you don’t understand any part, let me know.

2


It is not on 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 this looking for has already been demonstrated here at stackoverflow: Create dynamic JS table to use in HTML. I hope I’ve helped!!

Browser other questions tagged html css

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