Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: ameagle04 en 4 Diciembre 2015, 19:27 pm



Título: ayuda, ocultar, mostrar filas con javascript.
Publicado por: ameagle04 en 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
  1. /* clase para ocultar el div al inicio */
  2. .oculto {
  3. display:none;
  4. }
  5. </style>
  6.    <script type="text/javascript">
  7. <!--
  8. /*****************************Ocultar div**************************/
  9. var visto = null;
  10. function ver(num) {
  11. obj = document.getElementById(num);
  12. obj.style.display = (obj==visto) ? 'none' : 'block';
  13. if (visto != null)
  14. visto.style.display = 'none';
  15. visto = (obj==visto) ? null : obj;
  16. }
  17. -->
  18.  
  19.  
  20. </script>
  21. </head>
  22.  
  23.        <table border="0" cellpadding="2" cellspacing="0" width="50%">
  24.  
  25.            <?php
  26.  
  27. $contador = 0;
  28. while ($contador < 10){
  29. $contador ++;
  30. ?>
  31.            <tr <?= $contador%2==0?'style="background-color:#F3F3F3"':'' ?> onclick="ver('div_sergios')">
  32.    <td align="left" valign="top" nowrap="nowrap">aduana</td>
  33.             <td align="left" valign="top" nowrap="nowrap">codigo</td>
  34.                <td align="left" valign="top" nowrap="nowrap">referencia</td>
  35.                <td align="left" valign="top" nowrap="nowrap">guia</td>
  36. <td align="left" valign="top" nowrap="nowrap">pedimento</td>
  37. <td align="left" valign="top" nowrap="nowrap">Ver Eventos</td>
  38.  
  39.  
  40. <tr>
  41.             <td colspan="3">
  42.                 <div id="div_sergios" class="oculto">
  43.                 <table border="1" cellpadding="0" cellspacing="1">
  44.                     <tr>
  45.                         <td>Evento 1</td>
  46.                            <td>435432</td>
  47.                            <td>3e11g68146</td>
  48.                        </tr>
  49. <tr>
  50.                         <td>Evento 2</td>
  51.                            <td>654234</td>
  52.                            <td>232321d22</td>
  53.                        </tr>
  54. <tr>
  55.                         <td colspan="2">Numero de fila</td>
  56.                            <td><?php echo $contador; ?></td>
  57.                        </tr>
  58.  
  59. </table>
  60.                    </div>
  61.                </td>
  62.  
  63. </tr>
  64.            </tr>
  65.  
  66.            <?php
  67. }
  68.  
  69. ?>
  70.        </table>  
  71.         <br/>
  72.  
  73. </body>
  74. </html>

Mod: Obligatorio el uso de etiquetas GeSHi.


Título: Re: ayuda, ocultar, mostrar filas con javascript.
Publicado por: CeLaYa en 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
  1. <tr <?php $contador%2==0?'style="background-color:#F3F3F3"':'' ?>  onclick="ver('div_sergios<?php echo $contador;?>')">
  2. ...
  3.  
  4. <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()