Tabla de Multiplicar en Javascript

Tabla de multiplicar en javascript
Publicado por jose (9 intervenciones) el 07/09/2014 20:56:36
Hola a todos, tengo un problema en javascript del cual debo crear un programa en el cual eliga un numero por
pantalla con el "prompt", y despues muestre la tabla de multiplicacion por pantalla , ej . si escribo el nr 5 , debe
aparecer la tabla de multiplicacion del 5 desde el 5 * 1 hasta el 5 * 10. Mi problema es que cuando ingreso un numero
me aparecen todas las tablas de multiplicar desde la tabla del 1 hasta la del 10 :( . todo esto esta hecho dentro de un
"table" en html.
Por favor, si me pueden ayudar, se los agradeceria, gracias :)
Les dejo mi codigo
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE HTML>
<head>
<title>Javascript one</title>
</head>
<body>
<script type= "text/javascript">
var nr;
nr=prompt('Ingrese un numero(1-10)','');
nr=parseInt(nr);
document.write("<table border='1'>");
var x=0;
for (x = 1; x <= 10; x++) {
for (y=1; y<=10; y++){
tabel=5*x;
document.write("<tr><td>");
document.write("5x"+x+"="+ tabel + "<br>");
document.write("</td></tr>");
}
document.write("<br>");
document.write("</table>");
</script>
</body>
</html>
Valora esta pregunta
0
Responder
Pos: 1
Val: 2.205
Publicado por xve (2078 intervenciones) el 07/09/2014 21:51:32
Hola Jose te sobra un bucle...
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE HTML>
<head>
<title>Javascript one</title>
</head>
<body>
var nr;
nr=prompt('Ingrese un numero(1-10)','');
nr=parseInt(nr);
document.write("<table border='1'>");
var x=0;
for (x = 1; x <= 10; x++)
tabel=nr*x;
document.write("<tr><td>");
document.write(nr+"x"+x+"="+ tabel + "<br>");
document.write("</td></tr>");
document.write("</table>");
</script>
</body>
</html>
Valora esta respuesta
0
Comentar

Publicado por Ivan silva (1 intervención) el 05/11/2014 22:16:53
Su codigo sigue siendo demasiado extenso... Este si que funciona y sin tantos rodeos, lo podran comprender!
1
2
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE HTML>
<html>
<head>
<title> Tablas de multiplicar </title>
</head>
<body bgcolor=brown>
<a href="https://twitter.com/?partner=opera15-mx=">
var y;
y=prompt('GENERAR TABLA DE MULTIPLICAR','');
y=parseInt(y);
for (var x = 1; x <= 10; x++) {
r=y*x;
document.write(y+"x"+x+"="+ r + "<br>");
}
</script> </a>
</body>
</html>
1
Comentar

Publicado por edagrdz (1 intervención) el 25/05/2018 05:32:45
Yo hice la tabla de la siguiente manera, asi me enseñaron a introducir y capturar datos:
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javascript</title>
</head>
<body>
<input type="text" id="numero" placeholder="Escribe una tabla">
<button id="iniciar">Iniciar tabla</button>
<script type="text/javascript">
document.getElementById("iniciar").onclick = function(){
//capturar numero ingresado

var entradaNumero =
document.getElementById("numero").value;
//iniciar tabla
for (var i=0; i<=10; i++){
//Bloque de instrucciones
var resultado = entradaNumero * i;
alert(entradaNumero+" * "+i+" = "+resultado);
alert("Fin del for");
</script>
</body>
</html>
0
Ejemplo: Crear una tabla HTML dinámicamente
(Ejemplo1.html)Sección
Contenido HTMLSección
<input type="button" value="Genera una tabla"

onclick="genera_tabla()">
JavaScript ContentSección
function genera_tabla() {
// Obtener la referencia del elemento body
var body = document.getElementsByTagName("body")[0];
// Crea un elemento <table> y un elemento <tbody>
var tabla = document.createElement("table");
var tblBody = document.createElement("tbody");
// Crea las celdas

for (var i = 0; i < 2; i++) {
// Crea las hileras de la tabla
var hilera = document.createElement("tr");
for (var j = 0; j < 2; j++) {

// Crea un elemento <td> y un nodo de texto, haz que el
nodo de
// texto sea el contenido de <td>, ubica el elemento <td>
al final
// de la hilera de la tabla
var celda = document.createElement("td");
var textoCelda = document.createTextNode("celda en la
hilera "+i+", columna "+j);
celda.appendChild(textoCelda);
hilera.appendChild(celda);
}
// agrega la hilera al final de la tabla (al final del

elemento tblbody)
tblBody.appendChild(hilera);
}
// posiciona el <tbody> debajo del elemento <table>

tabla.appendChild(tblBody);
// appends <table> into <body>
body.appendChild(tabla);
// modifica el atributo "border" de la tabla y lo fija a "2";
tabla.setAttribute("border", "2");
}
Abrir en CodePenAbrir en JSFiddle
Observa cuidadosamente el orden en el que se crearon los elementos en el

nodo de texto:
1. Primero se crea el elemento <table>.

2. Posteriormente, creamos el elemento <tbody> , que es el hijo del elemento <table> .
3. Después, utilizamos ciclos para crear los elementos <tr>, que son hijos del elemento
<tbody>.
4. Para cada elemento <tr>, utilizamos nuevamente ciclos para generar los elementos
<td> que son hijos de los elementos <tr>.
5. Para cada elemento <td>, creamos nodos de texto con el contenido de cada celda.
Una vez creados los elementos <table>, <tbody>, <tr>, y <td> así como los
nodos de texto, adicionamos a cada hijo bajo su padre en el órden opuesto:
1. Primero, anexamos cada nodo de texto a su elemento padre <td> :
2. Posteriormente, anexamos cada elemento <td> a su elemento padre <tr> :
hilera.appendChild(celda);
3. Posteriomente, anexamos cada elemento <tr> a su elemento padre <tbody>:
tblBody.appendChild(hilera);
4. Después, anexamos el elemento <tbody> a su elemento padre <table>:
tabla.appendChild(tblBody);
5. Finalmente, anexamos el elemento <table> a su elemento padre <body>:
body.appendChild(tabla);
Recuérda esta técnica. Te será muy útil en la programación bajo el estándar

W3C DOM. Primero, creas los elementos de arriba a abajo; posteriormente
adicionas los hijos a los padres de abajo a arriba.
A continuación aparece el código HTML generado por el código JavaScript:
...
<table border="2">
<tbody>
<tr><td>celda en la hilera 0, columna 0</td><td>celda en
la hilera 0, columna 1</td></tr>
<tr><td>celda en la hilera 1, columna 0</td><td>celda en
la hilera 1, columna 1</td></tr>
</tbody>
</table>
...
Aquí está el árbol de objetos DOM generado por el código del elemento
<TABLE> :
Tú puedes construir esta tabla y sus elementos internos utilizando sólo algunos
de los varios métodos del DOM. Recuerda tener en mente el modelo de la
estructura que planeas crear; esto hará mucho más fácil la escritura del código
necesario.
En el árbol del elemento <table> de la Figura 1, el elemento <table> tiene
solamente un hijo mientras que <tbody> tiene dos. A su vez, cada hijo de
<tbody> tiene dos hijos. Finalmente, cada elemento <td> tiene sólo uno, el nodo
de texto.
Ya he conseguido crear la tabla. Os pongo el código por si a alguien le interesa ver

como lo he hecho:
Código HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/estilo.css">
<script type="text/javascript" src="js/funciones.js"></script>
</head>
<body onload="crearTabla()">
<section id="butaca">
<p></p>
<p></p>
<table id="tabla" onclick="cambiaColor()"></table>
</section>
</body>
</html>
var columna=new Array();
columna[0]=1;
columna[1]=2;
columna[2]=3;
columna[3]=4;
columna[4]=5;
columna[5]=6;
var filas=new Array();
filas[0]=1;
filas[1]=2;
filas[2]=3;
filas[3]=4;
filas[4]=5;
var tabla=new Array();

tabla[0]=columna;
tabla[1]=filas;
function crearTabla(){
var tbl = document.getElementById("tabla");
var tblBody = document.createElement("tbody");
for (var i = 0; i < columna.length; i++) {
var fila = document.createElement("tr");
for (var j = 0; j < filas.length; j++) {
var celda = document.createElement("td");
var textoCelda = document.createTextNode(i+"-"+j);
fila.appendChild(celda);
tblBody.appendChild(fila);
tbl.appendChild(tblBody);
tbl.setAttribute("border", "2");

Tabla de Multiplicar en Javascript

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tabla de Multiplicar en Javascript

Uploaded by

Copyright:

Available Formats

Tabla de multiplicar en javascript

Publicado por jose (9 intervenciones) el 07/09/2014 20:56:36

Por favor, si me pueden ayudar, se los agradeceria, gracias :)

Les dejo mi codigo

<script type= "text/javascript">

for (x = 1; x <= 10; x++) {

for (y=1; y<=10; y++){

document.write("5x"+x+"="+ tabel + "<br>");

Hola Jose te sobra un bucle...

<script type= "text/javascript">

for (x = 1; x <= 10; x++)

document.write(nr+"x"+x+"="+ tabel + "<br>");