Foros del Web » Programando para Internet » Javascript »

Matrices en tablas dinamicas html con javascript

Estas en el tema de Matrices en tablas dinamicas html con javascript en el foro de Javascript en Foros del Web. Hola como van, estoy empezando con html y javascript asi que mi codigo puede parecer algo redundante y se que tambien se puede optimizar bastante. ...
  #1 (permalink)  
Antiguo 01/08/2012, 16:28
 
Fecha de Ingreso: agosto-2012
Ubicación: Bogota
Mensajes: 5
Antigüedad: 11 años, 9 meses
Puntos: 0
Exclamación Matrices en tablas dinamicas html con javascript

Hola como van, estoy empezando con html y javascript asi que mi codigo puede parecer algo redundante y se que tambien se puede optimizar bastante.

Bueno mi problema.... es un ejercicio en el cual debo solicitar al usuario el tamaño de dos matrices bidimencionales y multiplicarlas, el objetivo es que al obtener esos datos debo presentar en el formulario la captura visual de las matrices, es decir si el usuario quiere una matriz de 2 filas y 3 columnas debe mostrarse los input necesarios para realizar el carge de la matriz.

he creado el formulario para obtener los tamaños y generar las matrices por medio de tablas, pero al momento en que se generan las tablas con los input text el formulario se reinicia y necesito que las tablas se creen justo debajo en el formulario activo.

ademas si me pueden colaborar sobre el como logro obtener los datos digitados y hacer la multiplicacion se loa agradeceria mucho

aqui el codigo (si existe una mejor forma de crear las tablas tambien lo agradeceria, he visto muchos ejemplos pero hasta ahora solo he podido con este XD)

Código:
<html>
	<head>
		<meta name="author" content="Vargas Sarmiento Yimi"/>
		<meta name="description" content="Guia 1 HTML/JavaScript - ADSI 259128"/>
		<style>
			body {
				background-color: #DCDCDC;
			}
			#plano {
				font-family: Tahoma, Verdana, Arial;
				font-size: 12px;
				color: #000000;
				background-color: transparent;
				border-width: 0;
			}
		</style>
		<script>
			function OkSize(colA, filB) {
				if (colA == filB) {
					return true;
				} else {
					return false;
				}
			}

			function genMatrices(filA, colA, filB, colB) {

				document.write('<table name"tblMatrices" id="tblMatrices" border=1>')
				document.write('<tr>')

				document.write('<td align="center" valing="middle">')
				document.write('<table name="tblMtzA">')
				for ( i = 0; i < filA; i++) {
					document.write('<tr>')
					for ( j = 0; j < colA; j++) {
						document.write('<td><input type="text" size="1" maxlength="2"/></td>')
					}
					document.write('</tr>')
				}
				document.write('</table>')
				document.write('</td>')

				document.write('<td align="center" valign="middle">')
				document.write('<table name="tblMtzB">')
				for ( i = 0; i < filB; i++) {
					document.write('<tr>')
					for ( j = 0; j < colB; j++) {
						document.write('<td><input type="text" size="1" maxlength="2"/></td>')
					}
					document.write('</tr>')
				}
				document.write('</table>')
				document.write('</td>')

				document.write('<td align="center" valign="middle">');
				document.write('<table name="tblMtzR">')
				for ( i = 0; i < filA; i++) {
					document.write('<tr>')
					for ( j = 0; j < colB; j++) {
						document.write('<td><input type="text" size="1" maxlength="2"/></td>')
					}
					document.write('</tr>')
				}
				document.write('</table>')
				document.write('</td>')

				document.write('</tr>')
				document.write('</table>');
				
				var matrices = document.getElementById('tblMatrices');
				document.getElementById('divMatrices').innerHTML = matrices;

			}

			function OpeMultp(filA, colA, filB, colB) {
				if (OkSize(colA, filB) == false) {
					alert('No se puede multiplicar')
					document.frmArreglo4.txtMtzAfil.focus
				} else {
					genMatrices(filA, colA, filB, colB)
				}
			}

		</script>
	</head>
	<body>
		<form name="frmArreglo4" id="frmArreglo4">
			<h3 align="center">Arreglos 4</h3>
			<p align="center">
				Escriba el c&oacute;digo necesario para multiplicar dos matrices y generar el resultado.
				<br/>
				Tenga encuenta los criterios de validaci&oacute;n para multiplicar dos matrices.
			</p>
			<hr/>
			<h2 align="center">MULTIPLICACION DE MATRICES</h2>
			<table align="center" border="1">
				<tr>
					<td>
					<table>
						<tr>
							<td align="center" colspan="4"><b>Matriz A</b></td>
						</tr>
						<tr>
							<td>Filas:</td><td>
							<input name="txtMtzAfil" type="text" size="1" maxlength="2" value="2"/>
							</td><td>Columnas:</td><td>
							<input name="txtMtzAcol" type="text" size="1" maxlength="2" value="4"/>
						</tr>
					</table></td>
					<td>
					<table>
						<tr>
							<td align="center" colspan="4"><b>Matriz B</b></td>
						</tr>
						<tr>
							<td>Filas:</td><td>
							<input name="txtMtzBfil" type="text" size="1" maxlength="2" value="4"/>
							</td><td>Columnas:</td><td>
							<input name="txtMtzBcol" type="text" size="1" maxlength="2" value="3"/>
							</td>
						</tr>
					</table></td>
				</tr>
			</table>
			<br />
			<div align="center">
				<input name="btnMultiplicar" type="button" value="Generar Matrices" onclick="OpeMultp(txtMtzAfil.value, txtMtzAcol.value, txtMtzBfil.value, txtMtzBcol.value)"/>
			</div>
			<br/>
			<div id="divMatrices"> </div>
		</form>
	</body>
</html>

Muchas gracias!!!!!
  #2 (permalink)  
Antiguo 01/08/2012, 16:32
Avatar de dontexplain  
Fecha de Ingreso: junio-2012
Mensajes: 536
Antigüedad: 11 años, 10 meses
Puntos: 127
Respuesta: Matrices en tablas dinamicas html con javascript

<form name="frmArreglo4" id="frmArreglo4" onsubmit=" event.preventDefault(); return false;">

Un saludo.
__________________
21añero.
HTML/CSS, PHP, JS/jQuery, Mysql; NodeJS/Socket.io (& V8); C++ ; Python (wxpy); Ensamblador.
Músico (clarinetista/pianista) y compositor
  #3 (permalink)  
Antiguo 01/08/2012, 16:56
 
Fecha de Ingreso: agosto-2012
Ubicación: Bogota
Mensajes: 5
Antigüedad: 11 años, 9 meses
Puntos: 0
Respuesta: Matrices en tablas dinamicas html con javascript

Gracias dontexplain pero no estoy utilizando un submit, solo un boton que llama a la funcion.

tu consejo no aplico, quisiera que ejecutaras el codigo para tener una mejor perspectiva
  #4 (permalink)  
Antiguo 01/08/2012, 19:42
Avatar de dontexplain  
Fecha de Ingreso: junio-2012
Mensajes: 536
Antigüedad: 11 años, 10 meses
Puntos: 127
Respuesta: Matrices en tablas dinamicas html con javascript

Es lo que sucede cuando usas indiscriminadamente el document.write sin conocer realmente el DOM y cómo funciona.

Para eso creas una variable que se va rellenando con variable+='nuevo valor' y al final introduces el código con innerHTML

Me tomé la molestia de pasarlo todo nuevamente

Código Javascript:
Ver original
  1. function genMatrices(filA, colA, filB, colB) {
  2.                 c=new String();
  3.                 e=document.getElementById('divMatrices');
  4.                 c+='<table name"tblMatrices" id="tblMatrices" border=1>';
  5.                 c+='<tr>';
  6.  
  7.                 c+='<td align="center" valing="middle">';
  8.                 c+='<table name="tblMtzA">';
  9.                 for ( i = 0; i < filA; i++) {
  10.                     c+='<tr>';
  11.                     for ( j = 0; j < colA; j++) {
  12.                         c+='<td><input type="text" size="1" maxlength="2"/></td>';
  13.                     }
  14.                     c+='</tr>';
  15.                 }
  16.                 c+='</table>';
  17.                 c+='</td>';
  18.  
  19.                 c+='<td align="center" valign="middle">';
  20.                 c+='<table name="tblMtzB">';
  21.                 for ( i = 0; i < filB; i++) {
  22.                     c+='<tr>';
  23.                     for ( j = 0; j < colB; j++) {
  24.                         c+='<td><input type="text" size="1" maxlength="2"/></td>';
  25.                     }
  26.                     c+='</tr>';
  27.                 }
  28.                 c+='</table>';
  29.                 c+='</td>';
  30.  
  31.                 c+='<td align="center" valign="middle">';
  32.                 c+='<table name="tblMtzR">';
  33.                 for ( i = 0; i < filA; i++) {
  34.                     c+='<tr>';
  35.                     for ( j = 0; j < colB; j++) {
  36.                         c+='<td><input type="text" size="1" maxlength="2"/></td>';
  37.                     }
  38.                     c+='</tr>';
  39.                 }
  40.                 c+='</table>';
  41.                 c+='</td>';
  42.  
  43.                 c+='</tr>';
  44.                 c+='</table>';
  45.                
  46.                 //var matrices = document.getElementById('tblMatrices');
  47.                 //document.getElementById('divMatrices').innerHTML = matrices;
  48.                 e.innerHTML=c;
  49.  
  50.             }


Un saludo.
__________________
21añero.
HTML/CSS, PHP, JS/jQuery, Mysql; NodeJS/Socket.io (& V8); C++ ; Python (wxpy); Ensamblador.
Músico (clarinetista/pianista) y compositor
  #5 (permalink)  
Antiguo 01/08/2012, 20:51
 
Fecha de Ingreso: agosto-2012
Ubicación: Bogota
Mensajes: 5
Antigüedad: 11 años, 9 meses
Puntos: 0
De acuerdo Respuesta: Matrices en tablas dinamicas html con javascript

jjejejejejejjeee si perdon por eso, llevaba un par de dias quebrandome la cabeza con este asunto.

ha funcionado como lo esperaba, ya solo me queda capturar los datos y hacer la multiplicacion de matrices (en lo que me quebrare la cabeza un rato mas XD), y pues no es disculpa, apenas y llevo un par de semanas de conocer Html y JavaScript, me gusta bastante, son sucesos de principiante.

muchas gracias dontexplain
  #6 (permalink)  
Antiguo 12/07/2016, 20:01
 
Fecha de Ingreso: mayo-2015
Ubicación: Valencia
Mensajes: 4
Antigüedad: 9 años
Puntos: 0
Respuesta: Matrices en tablas dinamicas html con javascript

Hola buenas noches, se que este tema es bastante viejo, quisiera saber si me orientar en este ejemplo luego como capturo los datos de esos campos, soy principiante y me ha llevado ya mucho tiempo y no lo consigo =( gracias...

Etiquetas: dinamicas, formulario, html, input, matrices, tablas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:45.