JQuery - hide y show especificos jquery

   
Vista:

hide y show especificos jquery

Publicado por Luis Angel (1 intervención) el 14/03/2016 20:14:35
Soy nuevo Trabajando en jQuery y me gustaria Un poco de su ayuda, quiero activar y desactivar el primer grupo de input usando jquery. Lo intenté de esa manera y claramente no es la correcta, agradecería mucho su respuesta.

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<style>
		.table{
			text-align: center;
		}
		.btn-actualizar, .btn-cancelar{
			display: none;
		}
		.vueltas{
		    width: 80px;
		    text-align: center;
		    border: none;
		    background: no-repeat;
		}
		.border-vuelta{
			border: solid 1px #DDD;
		}
	</style>
 
</head>
<body>
 
<div class="container">
	<div class="row">
		<div class="col-md-12">
			<div class="table-responsive">
				<table class="table table-striped table-bordered">
					<tr>
						<td>No. de Config</td>
						<td>Configuración</td>
						<td>Tratamiento</td>
						<td>Producto</td>
						<td>Dosis</td>
						<td>Total Cajas Tarima</td>
						<td>No. de Vueltas</td>
						<td>Vueltas</td>
					</tr>
					<tr>
						<td>1</td>
						<td>Guava test</td>
						<td>Servicio Frescos Pruebas</td>
						<td>Guayaba</td>
						<td>400</td>
						<td>80</td>
						<td><input type="text" class="vueltas" readonly="true" value="1"/></td>
						<td>
							<input class="btn btn-default btn-vuelta" type="button" value="Editar No. Vueltas">
							<input class="btn btn-default btn-actualizar"  type="button" value="Actualizar">
							<input class="btn btn-default btn-cancelar" type="button" value="Cancelar">
						</td>
					</tr>
					<tr>
						<td>1</td>
						<td>Guava test</td>
						<td>Servicio Frescos Pruebas</td>
						<td>Guayaba</td>
						<td>400</td>
						<td>80</td>
						<td><input type="text" class="vueltas" readonly="true" value="1"/></td>
						<td>
							<input class="btn btn-default btn-vuelta" type="button" value="Editar No. Vueltas">
							<input class="btn btn-default btn-actualizar"  type="button" value="Actualizar">
							<input class="btn btn-default btn-cancelar" type="button" value="Cancelar">
						</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
 
 
</div>
<!-- Libreria jQuery -->
	<script type="text/javascript" src="js/jquery-1.12.1.min.js"></script>
 
<script type="text/javascript">
	$(document).ready(function(){
		$(".btn-vuelta").click(function() {
		     $('.btn-actualizar').show();
	         $('.btn-cancelar').show();
		     $('.btn.btn-vuelta').hide();
		     $('.vueltas').attr('readonly', false);
	         $('.vueltas').addClass("border-vuelta");
		});
 
		$('.btn-actualizar').click(function(){
			$('.btn-actualizar').hide();
		    $('.btn-cancelar').hide();
			$('.btn-vuelta').show();
		    $('.vueltas').attr('readonly', true);
		    $('.vueltas').removeClass("border-vuelta");
 
		});
 
		$('.btn-cancelar').click(function(){
			$('.btn-actualizar').hide();
		    $('.btn-cancelar').hide();
			$('.btn-vuelta').show();
		    $('.vueltas').attr('readonly', true);
		    $('.vueltas').removeClass("border-vuelta");
 
		});
	});
</script>
 
</body>
</html>
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

hide y show especificos jquery

Publicado por Octavio (7 intervenciones) el 15/03/2016 20:11:47
La verdad es que no entiendo realmente lo que quieres hacer. Si puedes dar un poco más de información a lo mejor podemos ayudarte.
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

hide y show especificos jquery

Publicado por arck (21 intervenciones) el 17/03/2016 14:20:03
Pues a mi me tira bien.
quite bootstrap porque lo tienes en local y puse link al core de jquery 1.11.1 y creo que hace lo que quieres

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.table{
			text-align: center;
		}
		.btn-actualizar, .btn-cancelar{
			display: none;
		}
		.vueltas{
		    width: 80px;
		    text-align: center;
		    border: none;
		    background: no-repeat;
		}
		.border-vuelta{
			border: solid 1px #DDD;
		}
	</style>
 
</head>
<body>
 
<div class="container">
	<div class="row">
		<div class="col-md-12">
			<div class="table-responsive">
				<table class="table table-striped table-bordered">
					<tr>
						<td>No. de Config</td>
						<td>Configuración</td>
						<td>Tratamiento</td>
						<td>Producto</td>
						<td>Dosis</td>
						<td>Total Cajas Tarima</td>
						<td>No. de Vueltas</td>
						<td>Vueltas</td>
					</tr>
					<tr>
						<td>1</td>
						<td>Guava test</td>
						<td>Servicio Frescos Pruebas</td>
						<td>Guayaba</td>
						<td>400</td>
						<td>80</td>
						<td><input type="text" class="vueltas" readonly="true" value="1"/></td>
						<td>
							<input class="btn btn-default btn-vuelta" type="button" value="Editar No. Vueltas">
							<input class="btn btn-default btn-actualizar"  type="button" value="Actualizar">
							<input class="btn btn-default btn-cancelar" type="button" value="Cancelar">
						</td>
					</tr>
					<tr>
						<td>1</td>
						<td>Guava test</td>
						<td>Servicio Frescos Pruebas</td>
						<td>Guayaba</td>
						<td>400</td>
						<td>80</td>
						<td><input type="text" class="vueltas" readonly="true" value="1"/></td>
						<td>
							<input class="btn btn-default btn-vuelta" type="button" value="Editar No. Vueltas">
							<input class="btn btn-default btn-actualizar"  type="button" value="Actualizar">
							<input class="btn btn-default btn-cancelar" type="button" value="Cancelar">
						</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
 
 
</div>
<!-- Libreria jQuery -->
	  <script   src="https://code.jquery.com/jquery-1.11.1.js"></script>
 
<script type="text/javascript">
	$(document).ready(function(){
		$('.btn-vuelta').click(function() {
		     $('.btn-actualizar').show();
	         $('.btn-cancelar').show();
		     $('.btn-vuelta').hide();
		     $('.vueltas').attr('readonly', false);
	         $('.vueltas').addClass("border-vuelta");
		});
 
		$('.btn-actualizar').click(function(){
			$('.btn-actualizar').hide();
		    $('.btn-cancelar').hide();
			$('.btn-vuelta').show();
		    $('.vueltas').attr('readonly', true);
		    $('.vueltas').removeClass("border-vuelta");
 
		});
 
		$('.btn-cancelar').click(function(){
			$('.btn-actualizar').hide();
		    $('.btn-cancelar').hide();
			$('.btn-vuelta').show();
		    $('.vueltas').attr('readonly', true);
		    $('.vueltas').removeClass("border-vuelta");
 
		});
	});
</script>
 
</body>
</html>
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