Foros del Web » Programando para Internet » Javascript »

Cambiar bgcolor segun posicion

Estas en el tema de Cambiar bgcolor segun posicion en el foro de Javascript en Foros del Web. Tengo un menu horizontal que segun cual clickeo me muestra una fila debajo y quiero que las filas tengas 2 colores, pero no se como ...
  #1 (permalink)  
Antiguo 10/11/2003, 10:20
 
Fecha de Ingreso: agosto-2003
Mensajes: 203
Antigüedad: 21 años, 4 meses
Puntos: 0
Cambiar bgcolor segun posicion

Tengo un menu horizontal que segun cual clickeo me muestra una fila debajo y quiero que las filas tengas 2 colores, pero no se como cambiarlas segun la posicion

Fila1 Fila2 Fila3 Fila4 Fila5

Activada Fila1 Color de fondo 666666
Activada Fila2 Color de fondo CCCCC
Activada Fila3 Color de fondo 666666
Activada Fila4 Color de fondo CCCCC
Activada Fila5 Color de fondo 666666

Fila1 Fila2 Fila3 Fila4 Fila5

No Activada Fila1 (no la muestra)
Activada Fila2 Color de fondo 666666
Activada Fila3 Color de fondo CCCCC
No Activada Fila4 (no la muestra)
Activada Fila5 Color de fondo 666666

Espero se entienda, gracias por cualquier ayuda
  #2 (permalink)  
Antiguo 13/11/2003, 08:21
 
Fecha de Ingreso: noviembre-2002
Ubicación: Washington, DC
Mensajes: 822
Antigüedad: 22 años, 1 mes
Puntos: 5
No entiendo...puedes pegar parte del codigo que tienes hasta ahora en el menu y ejemplo de como quisieras que se viera?
__________________
Yanira
  #3 (permalink)  
Antiguo 13/11/2003, 08:33
 
Fecha de Ingreso: agosto-2003
Mensajes: 203
Antigüedad: 21 años, 4 meses
Puntos: 0
Estuve probando y pude hacer algo, pero no muy optimo ya que me recorre todo el html y no solo los <tr> que necesito
esto es lo que hice
Espero que a alguien le sirva y si alguien lo optimiza muchas gracias
<SCRIPT LANGUAGE="JavaScript">
<!--

function ver(id,obj){
if (document.all[id].style.display=="inline"){
document.all[id].style.display="none";
obj.style.color="#000000";

}else{
document.all[id].style.display="inline";
obj.style.color="red";
}
pos = 2;
for(m=0;m<document.getElementById('tablita').getEl ementsByTagName('tr').length;m++){
idValue = document.getElementsByTagName('tr')[m].id;
if (idValue!=""){
color = document.all[idValue].bgColor;
estado = document.getElementsByTagName('tr')[m].style.display;
if (estado=="inline") {
if (pos % 2 == 1){
document.all[idValue].bgColor = "White";
}else{
document.all[idValue].bgColor = "#E6E6E0";
}
pos = pos + 1;
}
}
}

}

//-->
</SCRIPT>

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><table width="100%" id=tablita border="0" cellpadding="0" cellspacing="0" class="cabecera">
<tr valign="middle" bgcolor="#CCCCCC">
<td height="5" colspan="20" class="lista1"><img src="{dirImage}/images/spacer.gif" width="100%" height="5"></td>
</tr>
<tr valign="middle" bgcolor="#E6E6E0" height="15">
<td width="5" class="lista1">&nbsp;</td>
<td width="21" class="lista1"> <div align="center">&nbsp;</div></td>
<td width="20%" colspan="3" class="lista1">&nbsp;</td>
<td width="15" class="lista1"><div align="center"></div></td>
<td class="lista1" onclick="ver('div_mens{id}',this);" id=mens style="cursor:hand;">&nbsp;Mensajes({m_cant})</td>
<td width="15" class="lista1"><div align="center"></div></td>
<td class="lista1" onclick="ver('div_cons{id}',this);" id=cons style="cursor:hand;">&nbsp;Consultas({c_cant})</td>
<td width="15" class="lista1"><div align="center"></div></td>
<td class="lista1" style="cursor:hand;" onclick="ver('div_cart{id}',this);" id=cart>&nbsp;Cartelera({cart_cant})</td>
<td width="15" class="lista1"><div align="center"></div></td>
<td class="lista1" style="cursor:hand;" onclick="ver('div_cal{id}',this);" id=cal>&nbsp;Calendario({cantCal})</td>
<td width="15" class="lista1"><div align="center"></div></td>
<td class="lista1" style="cursor:hand;" onclick="ver('div_glo{id}',this);" id=glo>&nbsp;Glosario({glo_cant})</td>
<td width="15" class="lista1"><div align="center"></div></td>
<td class="lista1" style="cursor:hand;" onclick="ver('div_bib{id}',this);" id=bib>&nbsp;Bibliografia({bib_cant})</td>
</tr>
<tr valign="middle" id="div_mens{id}" style='display:none;' bgcolor="#E6E6E0">
<td colspan="19">
<table width="100%" class="lista1" cellpadding="0" cellspacing="0">
<tr><td width="5">&nbsp;</td><td style="cursor:hand;" onclick="ver('div_mens{id}',mens);"><strong>MENSAJ ES</strong></td></tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" height=5>
<tr bgcolor="#CCCCCC"><td width="100%" height=5>Mensaje 1</td></tr>
</table>
</td>
</tr>
<tr valign="middle" id="div_cons{id}" style='display:none;' bgcolor="#E6E6E0">
<td colspan="19">
<table width="100%" class="lista1">
<tr><td width="5">&nbsp;</td><td style="cursor:hand;" onclick="ver('div_cons{id}',cons);"><strong>CONSUL TAS</strong></td></tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" height=5>
<tr bgcolor="#CCCCCC"><td width="100%" height=5>Consulta 1</td></tr>
</table>
</td>
</tr>
<tr valign="middle" id="div_cart{id}" style='display:none;' bgcolor="#E6E6E0">
<td colspan="19">
<table width="100%" class="lista1">
<tr><td width="5">&nbsp;</td><td style="cursor:hand;" onclick="ver('div_cart{id}',cart);"><strong>CARTEL ERA</strong></td></tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" height=5>
<tr bgcolor="#CCCCCC"><td width="100%" height=5>Consulta 1</td></tr>
</table>
</td>
</tr>
<tr valign="middle" id="div_cal{id}" style='display:none;' bgcolor="#E6E6E0">
<td colspan="19">
<table width="100%" class="lista1">
<tr><td width="5">&nbsp;</td><td style="cursor:hand;" onclick="ver('div_cal{id}',cal);"><strong>CALENDAR IO</strong></td></tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" height=5>
<tr bgcolor="#CCCCCC"><td width="100%" height=5>Calendario 1</td></tr>
</table>
</td>
</tr>
<tr valign="middle" id="div_glo{id}" style='display:none;' bgcolor="#E6E6E0">
<td colspan="19">
<table width="100%" class="lista1">
<tr><td width="5">&nbsp;</td><td style="cursor:hand;" onclick="ver('div_glo{id}',glo);"><strong>GLOSARIO </strong></td></tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" height=5>
<tr bgcolor="#CCCCCC"><td width="100%" height=5>Glosario 1</td></tr>
</table>
</td>
</tr>
<tr valign="middle" id="div_bib{id}" style='display:none;' bgcolor="#E6E6E0">
<td colspan="19">
<table width="100%" class="lista1">
<tr><td width="5">&nbsp;</td><td style="cursor:hand;" onclick="ver('div_bib{id}',bib);"><strong>BIBLIOGR AFIA</strong></td></tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" height=5>
<tr bgcolor="#CCCCCC"><td width="100%" height=5>Bibliografia 1</td></tr>
</table>
</td>
</tr>
</table></td>
</tr>
</table>
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:34.