JavaScript - Mostrar th, td e input oculto

 
Vista:
Imágen de perfil de John
Val: 21
Ha aumentado su posición en 10 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Mostrar th, td e input oculto

Publicado por John (12 intervenciones) el 27/07/2018 22:22:02
Hola queridos amigos, hoy vengo con un pequeño problema, seguramente super facil, pero que no logro hacer bien.

tengo el siguiente codigo

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
<script type="text/javascript">
	function cambiarDisplay(id) {
	if (!document.getElementById) return false;
	fila = document.getElementById(id);
	if (fila.style.display != "none") {
		fila.style.display = "none";
	} else {
		fila.style.display = "";
	}
	}
</script>
 
<table border="1">
  <tr>
	<th> Categoria </th>
	<th> Alimento </th>
	<th> Cantidad </th>
	<th> Stock Minimo  </th>
	<th id="col2" onClick="cambiarDisplay('col2')" style="display:none"> Modificar Stock </th>
  </tr>
 
  <tr>
	<td> Categoria 1 </td>
 
	<td> Alimento 1 </td>
 
	<td> Cantidad 1 </td>
 
	<td> Stock 1 <a href="#" id="col1" onClick="cambiarDisplay('col2')">ver</a> </td>
 
	<td id="col2" onClick="cambiarDisplay('col2')" style="display:none"> <input type="number" /> </td>
  </tr>
</table>

la idea es que al darle click en el enlace de la linea 29, me muestre la columna que esta oculta asi como tambien un input que esta dentro.

tal como esta funciona como lo necesito, a excepción que no me muestra el input ni nada de lo que ponga dentro de esa etiqueta td.

por favor alguien que me oriente!!! mil 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
Imágen de perfil de Alejandro
Val: 1.439
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Mostrar th, td e input oculto

Publicado por Alejandro (335 intervenciones) el 27/07/2018 23:45:25
Los ID deben ser U-NI-COS, es error que tengas:
1
2
3
<th id="col2" ...>
...
<td id="col2" ...>
por tal motivo solo se aplica al primer id que encuentra, el del <th>; que es una celda de encabezado.

puedes cambiar "id" por un "class"
1
2
3
<th class="col2" ...>
...
<td class="col2" ...>

esto implica que cambies tu función
1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
	function cambiarDisplay(id) {
		fila =  document.querySelectorAll(".col2");
		for(cel of fila){
			if (cel.style.display != "none") {
				cel.style.display = "none";
			}else{
				cel.style.display = "";
			}
		}
	}
</script>
lo que haces es recorrer cada celda con el class del parámetro que pasas al argumento id y aplicar el estilo.
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 John
Val: 21
Ha aumentado su posición en 10 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Mostrar th, td e input oculto

Publicado por John (12 intervenciones) el 30/07/2018 14:49:16
Hola Alejandro muchas gracias por tu ayuda, me funciono, debo comenzar a involucrarme mas con javascript jeje
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