HTML - Input en tablas html

 
Vista:
Imágen de perfil de Hector SG

Input en tablas html

Publicado por Hector SG (4 intervenciones) el 14/02/2017 18:53:14
Buenos días tengo una duda con respecto al input en html. Tengo el siguiente código:

1
2
3
4
5
<form method="POST" oninput="resultado.value=(valor1.value)*(valor2.value)">
	<input type="number" id="valor1" value="0"> *
	<input type="number" id="valor2" value="0"> =
	<output name="resultado" for="valor1 valor2"></output>
</form>

Mi duda es si se puede hacer que cada input y el output se acomoden en el mismo renglón pero en diferentes columnas de una tabla?

Gracias!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil
Val: 8
Ha aumentado su posición en 10 puestos en HTML (en relación al último mes)
Gráfica de HTML

Input en tablas html

Publicado por Yamil Bracho (13 intervenciones) el 14/02/2017 19:23:56
Si pero te recomiendo boostrap para los layout de tus paginas...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Hetor SG

Input en tablas html

Publicado por Hetor SG (4 intervenciones) el 14/02/2017 19:53:00
Y como seria con tablas? Y con boostrap?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 8
Ha aumentado su posición en 10 puestos en HTML (en relación al último mes)
Gráfica de HTML

Input en tablas html

Publicado por Yamil Bracho (13 intervenciones) el 14/02/2017 20:06:42
Boostrap te facilita armar tu inteza grafica usando una grid. Puedes entrar al tutorial de boostrap https://www.w3schools.com/bootstrap/default.asp
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Hector

Input en tablas html

Publicado por Hector (4 intervenciones) el 16/02/2017 17:11:30
Muchas gracias!! Lo he estado probando y me ayudo en algunas cosas...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 1.060
Oro
Ha disminuido 1 puesto en HTML (en relación al último mes)
Gráfica de HTML

Input en tablas html

Publicado por xve (1541 intervenciones) el 15/02/2017 07:58:18
Hola Hector, yo no te recomiendo utilizar bootstrap... yo personalmente prefiero hacer yo el código css, ya que para tu ejemplo, ocuparia mucho mas bootstrap que tu pagina!!!

Puedes hacerlo con una <tabla> o con divs... Una simple manera seria algo así:

1
2
3
4
5
6
7
8
9
<style>
form>div {float:left;width:200px;}
</style>
 
<form method="POST" oninput="resultado.value=(valor1.value)*(valor2.value)">
	<div><input type="number" id="valor1" value="0"> *</div>
	<div><input type="number" id="valor2" value="0"> =</div>
	<div><output name="resultado" for="valor1 valor2"></output></div>
</form>

No se si es esto exactamente lo que quieres hacer... coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Hector

Input en tablas html

Publicado por Hector (4 intervenciones) el 16/02/2017 17:30:01
Efectivamente, sigo ocupando la tabla y el estilo de CSS lo tengo aparte lo cual si funciona. El detalle ahora es que en código que tengo, la operación se realiza solo cuando modifico el valor del input 1 (valor1) supongo que fue porque separe el form, pero fue la unica manera en que logre que hiciera el calculo. No se si puedas decirme en que esta mal.

Saludos....


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<table>
	<tr >
		<th>No. CONCEPTO</th>
		<th>DESCRIPCIÓN</th>
		<th>UNIDAD</th>
		<th>PRECIO UNITARIO</th>
		<th>CANTIDAD</th>
		<th>IMPORTE</th>
	</tr>
	<tr>
		<th><input type="number" name="concepto" step="1" min="1"></th>
		<th>
			<input list="listaproducto">
				<datalist id="listaproducto">
					<option value="Descripcion 1">
					<option value="Descripcion 2">
					<option value="Descripcion 3">
				</datalist>
		</th>
		<th>
			<input list="listaunidad">
				<datalist id="listaunidad">
					<option value="LTS">
				</datalist>
		</th>
		<th>
			<form method="POST" oninput="resultado.value=(valor1.value)*(valor2.value)">
			<input type="number" id="valor1" value="0">
		</th>
		<th>
			<input type="number" id="valor2" value="0">
		</th>
		<th>
			<output name="resultado" for="valor1 valor2"></output>
			</form>
		</th>
	</tr>
</table>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Alejandro
Val: 100
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Input en tablas html

Publicado por Alejandro (27 intervenciones) el 16/02/2017 23:42:18
Hola Hector puedes probar con este codigo javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
(function(d) {
 
var v1 = document.getElementById('valor1');
var v2 = document.getElementById('valor2');
var r = document.getElementsByName('resultado')[0];
 
function calcular() {
	r.value = v1.value * v2.value;
}
 
v1.addEventListener('input', calcular);
v2.addEventListener('input', calcular);
})(document);

Comentanos si te sirvio. Un Saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar