ayuda, ocultar, mostrar filas con javascript.

ameagle04 · 4 Diciembre 2015, 19:27 PM

Hola que tal buen dia.
Tengo este codigo con una funcion para mostrar y ocultar subfilas debajo de otra fila principal las cuales se generan mediante un ciclo pero al dar mostrar u ocultar solo funciona con la primera fila, las demas no.

pueden probar el codigo.

Código (html5) [Seleccionar]

<html>
<head>
<style>
	/* clase para ocultar el div al inicio */
	.oculto {
		display:none;
	} 
	</style>
    <script type="text/javascript">
	<!--
	/*****************************Ocultar div**************************/
	var visto = null;
	function ver(num) {
		obj = document.getElementById(num);
		obj.style.display = (obj==visto) ? 'none' : 'block';
		if (visto != null)
		visto.style.display = 'none';
		visto = (obj==visto) ? null : obj;
	}	
	-->
	
	
	</script>
</head>
<body>

        <table border="0" cellpadding="2" cellspacing="0" width="50%">
        	
            <?php
			
			$contador = 0; 
			while ($contador < 10){
				$contador ++;
			?>
            <tr <?= $contador%2==0?'style="background-color:#F3F3F3"':'' ?> onclick="ver('div_sergios')">
			    <td align="left" valign="top" nowrap="nowrap">aduana</td>
            	<td align="left" valign="top" nowrap="nowrap">codigo</td>
                <td align="left" valign="top" nowrap="nowrap">referencia</td>
                <td align="left" valign="top" nowrap="nowrap">guia</td>
				<td align="left" valign="top" nowrap="nowrap">pedimento</td>
				<td align="left" valign="top" nowrap="nowrap">Ver Eventos</td>
			
			
			<tr>
            	<td colspan="3">
                	<div id="div_sergios" class="oculto">
                	<table border="1" cellpadding="0" cellspacing="1">
                    	<tr>
                        	<td>Evento 1</td>
                            <td>435432</td>
                            <td>3e11g68146</td>
                        </tr>
						<tr>
                        	<td>Evento 2</td>
                            <td>654234</td>
                            <td>232321d22</td>
                        </tr>
						<tr>
                        	<td colspan="2">Numero de fila</td>
                            <td><?php echo $contador; ?></td>
                        </tr>
                        
						</table>
                    </div>
                </td>
				
			</tr>
			            </tr>			

            <?php
			}
			
			?>
        </table>  
        	<br/>
			
			</body>
			</html>

Mod: Obligatorio el uso de etiquetas GeSHi.

CeLaYa · 5 Febrero 2016, 00:58 AM

Buenas tardes, el problema es que tus subfilas tiene el mismo "id", por eso solo siempre se viazualiza u oculta el primero. Para corregir solo debes asignar un id diferente para cada subfila:

en tu código modifique 2 lineas:

Código (php) [Seleccionar]

<tr <?php $contador%2==0?'style="background-color:#F3F3F3"':'' ?>  onclick="ver('div_sergios<?php echo $contador;?>')">
...

<div id="div_sergios<?php echo $contador;?>" class="oculto">

con esto se generaran id div_sergios1, div_sergios2, div_sergios3, div_sergios4.... div_sergios10 el cual se pasa como parametro a la función ver()

Test Foro de elhacker.net SMF 2.1

ayuda, ocultar, mostrar filas con javascript.

ameagle04

CeLaYa