mostrar/ocultar filas tabla

pali_wichis · #1 (**permalink**) 11/06/2009, 15:37

Hola a tod@s:

Tengo un script para mostrar u ocultar filas de una tabla. Pero! no me funciona cuando tengo mas de una fila a la vez:

Código PHP:

  function cambiarDisplay(id) 

{

  var fila;

 
**if (!document.getElementById) 

**return false;

**

**fila = document.getElementById(id);

**

* if (fila.style.display != 'none')

* {

****fila.style.display = 'none'; //ocultar fila <br>

**} else 

**      {

****        fila.style.display = ''; //mostrar fila <br>

 *      }

}

y en la página (hecha con asp) va lo siguiente:

Código HTML:

<TABLE class=bktabla2 id=TABLE1 
style="LEFT: 378px; WIDTH: 301px; TOP: 135px; HEIGHT: 20px" cellSpacing=0 
cellPadding=0 align=center border=0>
  <TR>
    <TD class=subtitulo>Procedimiento</TD>
  </TR>
 <%do while not objRec.EOF%>
  <TR>
  <!-- id="row1" onClick="cambiarDisplay('row2')">-->
    <TD class=reqdatos3><a href="javascript:cambiarDisplay('row2')"><%=objRec.fields("Procedimiento")%></a></TD>
  </TR>
  <TR id="row2" style="DISPLAY:none">
  <!-- id="row2" onClick="cambiarDisplay('row2')" >-->
    <TD class=reqdatos2><%=objRec.fields("NombreBatch")%></TD>
  </TR>
         <%objRec.moveNext
            loop
            set objRec = nothing%>
  </TABLE>

son muchas filas, dependen de la cantidad de datos que tenga la bd, y lo curioso es que me despliega solo la 1° fila oculta, es decir, muestra y oculta solo la primera fila que correspondiente al id="row2".

que puede ser?

gracias!

David · #2 (**permalink**) 11/06/2009, 21:50

¿Tienes varios elementos con id "row2"? Ya que el id debe ser único en el documento.

¿Ese es todo el código de los elementos en cuestión? (De preferencia, sólo coloca el código resultente -"Ver Código Fuente" de tu navegador- en lugar del código ASP)

pali_wichis · #3 (**permalink**) 12/06/2009, 08:17

Hola David... si, tengo varios elementos con ese nombre, puesto que como se llena con el recordset de la bd, esa fila toma los n valores que contenga mi tabla... por eso no puede ser unico, puesto que se repite las n veces dependiendo de los valores...
y bueno, te dejo el codigo fuente:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<link href="../afcbackend.css" rel="stylesheet" type="text/css">
<HEAD>
<script type="text/javascript" src="stmenu.js"></script>
<script>

function cambiarDisplay(id)
{
var fila;

  if (!document.getElementById)
  return false;

  fila = document.getElementById(id);

if (fila.style.display != 'none')
{
    fila.style.display = 'none'; //ocultar fila <br>
  } else
   {
     fila.style.display = ''; //mostrar fila <br>
}
}

</script>
</HEAD>
<BODY>
<P>
<TABLE id=Table1 style="LEFT: 338px; TOP: 20px" cellSpacing=0 cellPadding=0
width=605 border=0>

<TR>
<TD width=38><IMG style="WIDTH: 37px; HEIGHT: 20px" height=20 src="http://www.forosdelweb.com/f13/images/bola1.gif" width=30 ></TD>
<TD class=titeditable vAlign=bottom width=567>
<P>Administrador de Programas Batch</FONT></P></TD></TR>
<TR>
<TD><IMG height=1 src="http://www.forosdelweb.com/f13/images/bola3.gif" width=38></TD>
<TD><IMG height=1 src="http://www.forosdelweb.com/f13/images/block2.gif" width=567></TD></TR>
<TR>
<TD><IMG height=8 src="http://www.forosdelweb.com/f13/images/bola2.gif" width=38></TD>
<TD></TD></TR></TABLE></P>
<P> </P>
<P>

<script type="text/javascript">

</script>

</P>
<P>

</P>
<P> </P>

<TABLE class=bktabla2 id=TABLE1
style="LEFT: 378px; WIDTH: 301px; TOP: 135px; HEIGHT: 20px" cellSpacing=0
cellPadding=0 align=center border=0>
<TR>
<TD class=subtitulo>Procedimiento</TD>
</TR>

<TR>

<TD class=reqdatos3><a href="javascript:cambiarDisplay('row2')">EXTRAE_DP EX_AFIEMP.COM</a></TD>
</TR>
<TR id="row2" style="DISPLAY: none">

<TD class=reqdatos2>EXTRAE_DPEX_AFIEMP</TD>
</TR>

<TR>

<TD class=reqdatos3><a href="javascript:cambiarDisplay('row2')">GEN_CARTA _PAGOEX_1.COM</a></TD>
</TR>
<TR id="row2" style="DISPLAY: none">

<TD class=reqdatos2>GEN_CARTA_PAGOEX_1</TD>
</TR>

<TR>

<TD class=reqdatos3><a href="javascript:cambiarDisplay('row2')">GEN_CARTA _PAGOEX_EXTRAE.COM</a></TD>
</TR>
<TR id="row2" style="DISPLAY: none">

<TD class=reqdatos2>GEN_CARTA_PAGOEX_EXTRAE</TD>
</TR>

<TR>

<TD class=reqdatos3><a href="javascript:cambiarDisplay('row2')">GENCAR_PA GOEX_EMPL_V2.COM</a></TD>
</TR>
<TR id="row2" style="DISPLAY: none">

<TD class=reqdatos2>GENCAR_PAGOEX_EMPL_V2</TD>
</TR>

</TABLE>

</BODY>
</HTML>

eso...
gracias!

gioramies · #4 (**permalink**) 12/06/2009, 08:55

Hola pali_wichis, te recomendaría que no colocaras dos elementos con un mismo id. Es muy posible que allí se encuentre el problema. Por favor describe cual es el comportamiento de la situación que se te presenta cuando tienes más de una fila, y también dinos que tratas de hacer, quizás podríamos decirte como hacerlo de una forma más sencilla.

pali_wichis · #5 (**permalink**) 12/06/2009, 09:12

si, claramente ese es el problema...
lo malo, es que estas funciones no sirven para mas de un elemento en modo dinámico, porque estático, le puedo dar valores unicos, dinámicos no...
por lo que estoy pensando en no hacerlo asi sino que de otro modo con asp...
me complique mucho la vida pensando en que javascript podría ayudarme con el dinamismo... ahora, si ven la manera de que sea dinamico, mejor... pero hasta el momento, no he encontrado en ningun foro o pagina que sea asi...

:(

gracias de todos modos...

David · #6 (**permalink**) 12/06/2009, 09:47

No entendí. Si nos explicas exactamente qué "dinamismo" es el que quieres lograr, tal vez podamos ayudarte.

Lo que no puedes hacer es asignar elementos con el mismo id (y de hecho no es necesario hacerlo), ya que este debe ser un identificador único en el documento.

matak · #7 (**permalink**) 12/06/2009, 10:00

Y un contador no te sirve.
Lo inicializas a 0 y lo vas aumentado en cada iteración

Entonces algo asi

Código html:

Ver original<TABLE class=bktabla2 id=TABLE1 
style="LEFT: 378px; WIDTH: 301px; TOP: 135px; HEIGHT: 20px" cellSpacing=0 
cellPadding=0 align=center border=0>
  <TR>
    <TD class=subtitulo>Procedimiento</TD>
  </TR>
 <&#37;
   ////////n=0;
   do while not objRec.EOF%>
  <TR id="row_<%  //////print(n) %>" onClick="cambiarDisplay('row_<%  //////print(n) %>')">
  <!-- id="row1" onClick="cambiarDisplay('row2')">-->
    <TD class=reqdatos3><a href="javascript:cambiarDisplay('row2')"><%=objRec.fields("Procedimiento")%></a></TD>
  </TR>
  <TR id="row2" style="DISPLAY:none">
  <!-- id="row2" onClick="cambiarDisplay('row2')" >-->
    <TD class=reqdatos2><%=objRec.fields("NombreBatch")%></TD>
  </TR>
         <%objRec.moveNext
            /////n++
            loop
            set objRec = nothing%>
  </TABLE>

Supongo que la sistaxis no será exactamente asi ya que yo sólo trabajo con PHP

Saludos

pali_wichis · #8 (**permalink**) 12/06/2009, 11:43

lo que quiero es esto:
yo lleno con un recordset una tabla con "N" valores... en cada consulta, dependiendo del criterio, me puede llenar la tabla con 5 o 97 valores... pero cada uno de esos valores tiene uno o varios hijos, por llamarlo asi... por lo que quiero que si tengo 97 valores, quiero que me aparezcan los 97 y ocultos sus hijos, para que no se vea tan monstruoso en la página... por lo que necesito una función que me muestre los registros padres y los hijos aparezcan cuando los cliqueo...
eso es...

se entiende?
eso espero :S

gioramies · #9 (**permalink**) 12/06/2009, 13:02

Hola:

Creo que ya comprendí lo que quieres. En este caso sólo los padres tienen que tener un id, los hijos no es necesario, o pueden tener uno propio y único si quieres. Daré un ejemplo:

Código:

HTML:

<table><tr id="miId"> <a onclick="mostrarHijos();">Click para ver mis hijos</a><div><td>Hijo 01</td>
<td>Hijo 02</td>
</div>
</tr>
<tr id="miId"> <a onclick="mostrarHijos();">Click para ver mis hijos</a><div><td>Hijo 01</td>
<td>Hijo 02</td>
</div>
</tr></table>


CSS:

table tr div {display: none;}


JAVASCRIPT:

function mostrarHijos(enlacePinchado) {enlacePinchado.nextSibling.style.display = "block";}

La idea es que los hijos esten en un div oculto, y cuando presiones click sobre el enlace que los debe mostrar, mediante Javscript seleccionas el nodo siguiente al enlace (el div oculto) y lo muestras. Para ocultarlo debes verificar si esta visible y luego ocultarlo, y viceversa.

Saludos.

pali_wichis · #10 (**permalink**) 12/06/2009, 13:36

Cita:

Iniciado por gioramies

Hola:

Creo que ya comprendí lo que quieres. En este caso sólo los padres tienen que tener un id, los hijos no es necesario, o pueden tener uno propio y único si quieres. Daré un ejemplo:

Código:

HTML:

<table><tr id="miId"> <a onclick="mostrarHijos();">Click para ver mis hijos</a><div><td>Hijo 01</td>
<td>Hijo 02</td>
</div>
</tr>
<tr id="miId"> <a onclick="mostrarHijos();">Click para ver mis hijos</a><div><td>Hijo 01</td>
<td>Hijo 02</td>
</div>
</tr></table>


CSS:

table tr div {display: none;}


JAVASCRIPT:

function mostrarHijos(enlacePinchado) {enlacePinchado.nextSibling.style.display = "block";}

La idea es que los hijos esten en un div oculto, y cuando presiones click sobre el enlace que los debe mostrar, mediante Javscript seleccionas el nodo siguiente al enlace (el div oculto) y lo muestras. Para ocultarlo debes verificar si esta visible y luego ocultarlo, y viceversa.

Saludos.

si, es eso, PERO! aqui tu le pasas al javascript un valor "enlacePinchado" de donde lo obtienes??

eso es lo que me complica... eso de pasarle el id de la celda... que pasa cuando se repiten los valores?
aun sigo investigando y probando...
gracias por los aportes! de verdad!

gioramies · #11 (**permalink**) 12/06/2009, 13:48

Hola:

Lo siento, olvidé colocarle esto - mostrarHijos(this); - a la función que se ejecuta en el onclick del enlace. La función function mostrarHijos(enlacePinchado) {...} lo recibe con el nombre enlacePinchado.

Siguiendo con lo demás, no estoy utilizando id en este script. De hecho, lo que realmente importa es que enlace se está pinchando. Si te das cuenta, después de cada <a> sigue un <div>, cuando das click en un enlace se ejecuta la función mostrarHijos y le dices: "este es el enlace que se pinchó", esto gracias al parámetro this que la función recibe con el nombre enlacePinchado. Así no importa el id del enlace, luego de saber que enlace es, puedes seleccionar el div adyacente a dicho enlace y mostrarlo.

En cuanto a lo del id, no tienen porque repetirse, o por lo menos en una base de datos normalizada no se repite un mismo id en una tabla.

Espero poder ayudarte. Creo que ya casi llegamos a la solución.

pali_wichis · #12 (**permalink**) 12/06/2009, 16:02

Bueno...
lo voy a probar... a ver si este fds me las ingenio y sacamos adelante este código...
gracias nuevamente y pondré en práctica todas sus sugerencias...
:D