2

Meu problema é o seguinte, só consigo exibir os resultados em um alert, como eu colocaria os valores dentro de uma tabela?

<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>
5
  • 6
    Então desenvolve a página e quando estiver com alguma dúvida específica, você posta aqui pra gente te ajudar.
    – Maniero
    Commented 24/09/2015 às 22:35
  • 1
    Ok, sem problemas. Obrigado Commented 24/09/2015 às 22:35
  • 1
    @GuilhermeLima completando o que o bigown disse, não entenda mal, mas o Stack Overflow é um website de dúvidas e não de solicitações. Tente algo, em caso de dúvidas, poste seu código, sua tentativa, ai sim, muitas pessoas irão te ajudar :). Commented 24/09/2015 às 22:53
  • Sim, peço desculpas foi inocência de minha parte, atualizei minha duvida. Commented 24/09/2015 às 22:57
  • 1
    Eu não sou bom de manipular DOM mas acho que agora quem sabe consegue para responder.
    – Maniero
    Commented 24/09/2015 às 23:38

2 Respostas 2

5

Para realizar o que deseja, você precisa criar uma tabela em seu código html e em seu for, você adicionar os valores de acordo com a multiplicação.

Utilizando seu código como exemplo ficaria assim:

#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.: O código está explicando o que faz em no próprio comentário do código.

1
  • Caso não entenda alguma parte, avise que explico melhor.
    – Randrade
    Commented 25/09/2015 às 0:24
2

Não está em uma tabela mas imprime fora do 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>

O que você realmente quer esta procurando já foi demonstado aqui no stackoverflow: Criar tabela dinâmica em JS para utilizar em HTML. Espero ter ajudado!!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .