Crear una tabla dinámica con un for y javascript.

amadeo123 · #1 (**permalink**) 20/05/2012, 11:16

Hola. Estoy haciendo una pequeña aplicación en js que consiste en introducir un numero y sacar la tabla de multiplicar de ese numero.

De momento solo llevo esto .

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<script type="text/javascript">

function tablamulti () {

//con document.getElementById obtenemos el dato necesario
// y se lo pasamos a la variable 
var num = document.getElementById('numero').value;

var tabla = '<table><tr><td>1</td><td>x</td>'
+'<td>'+num+'</td><td> =</td><td>'+num+'</td></tr></table>'+'<br>' ;

document.getElementById('numerof').innerHTML = num;
//document.getElementById('tablas').innerHTML = tabla;

for (x = 1; x < 10; x++) 
{ 
	document.getElementById('tablas').innerHTML = tabla; 
}

}


</script>
</head>


<body bgcolor = 'green' >
<br>
<br>
<br>
<font size=6> Tabla de Multiplicar del</font> <font size=6 id='numerof'> </font>
<br>
<br>
<br>
<input type="button" onclick="tablamulti()" value="Introduzca el numero" />
<input type='text' id='numero' value=' ...' />
<br>
<br>
<br>
<font id='tablas'> hola</font>

</body>
</html>

Donde puedo introducir el numero y mostrarlo sin problema, pero cuando quiero que me imprima las 10 tablas no lo hace, solo imprime una.

Código Javascript:

Ver originalfor (x = 1; x < 10; x++) 
{ 
    document.getElementById('tablas').innerHTML = tabla; 
}

el for con que trabajo es este y no veo nada raro en él . no se donde puede estar el problema .

amadeo123 · #2 (**permalink**) 20/05/2012, 13:33

Ok . tras descansar un rato me he vuelto a poner y ya he solucionado el error. Aquí lo dejo por si a alguien le soluciona alguna duda en un futuro.

Código Javascript:

Ver originalvar tabla = '<table>'
 
document.getElementById('numerof').innerHTML = num;
//document.getElementById('tablas').innerHTML = tabla;
 
 
while (i<10)
{
 
 
 tabla += '<tr><td>'+i+'</td><td>x</td>'
+'<td>'+num+'</td><td> =</td><td>'+(num*i)+'</td></tr>';
 
 
i=i+1;
}
 
tabla += '</table>'
document.getElementById('tablas').innerHTML = tabla; 
    
 
 
}

lo que hay que repetir en el bucle no es el document.getElementBy ... hay que repetir lo que vamos a introducir dentro e ir sumando a la variable que extraeremos con el getElement .

En este caso , como se trata de una tabla, lo que hay que hacer es solo repetir las etiquetas que dan forma a la tabla, pero las etiquetas que ''definen '' la tabla (<table>) las definimos una sola vez al principio y al final .