cambiar contenido td

fjmasero · #1 (**permalink**) 17/03/2004, 05:00

Wenas:

Tengo q hacer lo siguiente

En la celda de un tabla tengo q mostrar un contenido determinado, q varia al hacer click en un par de enlaces. Concretamente, por defecto aparece dentro de la celda,la siguiente table (2)

Código:

<table border="1" cellpadding="0" cellspacing="0">
    <tr valign="middle">
      <td colspan="2" width="100%">
           <table width="100%" cellpadding="0" cellspacing="0" border="1">
            <tr>
              <td width="62" height="30" valign="middle" align="left">
                <a href="#" onClick="cambiaCapa('rbAlumnos')">
                  Alumnos
                </a>
              </td>
              <td class="texto10_660000" align="center">|</td>
              <td width="66" height="30" valign="middle" align="right">
                <a href="#" onClick="cambiaCapa('rbEmpresas')">
                  Empresas
                </a>
              </td>
            </tr>
          </table>
      </td>
    </tr>
</table>

Cuando se hace click en Alumnos, debe desaparece Alumnos|Empresas y aparecer, en el mismo sitio donde está esta table, sustituyendola, Alumnos. Si se hace click en Empresa, aparecerá Empresas.

Para ello, entiendo q la table 2, debe sustituirse por lo q corresponda, y para ello, creo q lo mejor es usar capas, de tal forma, es lo q se me ocurre, haya tres capas, una con la tabla 2, otra con Alumnos, y otra con Empresas., y cuando haces click en los link, aparezca la q corresponda.

Pero resulta q con estas cosas soy bastante torpe (¡¡q le vamos a hacer!!). He hecho varias pruebas y no he sido capaz de q me funcionara.

Si pongo las tres div dentro de la celda, digamos "principal", aparece la tabla, pero se provoca un espacio por debajo q no debe estar.

La función javascript cambiaCapa se supone q es la q debería hacer q una capa sustituyera a la q estuviera visible, pero con lo q he hecho, no lo he conseguido. Por cierto, debe funcionar en IE y en NS.

¿Cual opináis q es la mejor forma de hacerlo?. Si pudiérais pasarme algún código válido, me vendría fenomenal, pq ademas, como suelo ocurrir, esto no me corresponde hacerlo a mi, pero ... y encima me meten prisa

Salu2 y gracias

PiolinNet · #2 (**permalink**) 17/03/2004, 06:19

He leido x encima tu problema y asi a bote pronto
utiliza span en vez de div.
Luego lo leo + despacio.

fjmasero · #3 (**permalink**) 17/03/2004, 09:28

Hola PiolinNet:

Gracias por contestar.

No puedo usar span pq tengo q ocultar uno y otros, además de q en el proyecto real, en vez de texto son imágenes.

Salu2

fjmasero · #4 (**permalink**) 18/03/2004, 03:02

Ayudaaaaaaaaaaaa por favor

PatomaS · #5 (**permalink**) 18/03/2004, 04:51

Hola...

Bueno, aquí tenemos un problema bastante complejo, así que vayamos paso a paso...

Primero, para lograr la compatibilidad de tu código con los navegadores, debes decidir cuales son tus objetivos, es decir, si vas a programas tu página para navegadores de la generación 4, deberás usar los objetos document.layer[] y document.all, si quieres que funciones en los posteriores, deberás usar los manejadores getElementById(). Si quieres que funcione en todos, deberás usar ambos.

Obviamente, tienes que usar, además, detectores de navegadores, tanto de versión, co mode fabricante.

Bueno, una vez decidido esto, pasarás a hacer el código correspondiente, así que vamos a ello.

En principio, el mismo código html que usas es un poco enrevesado, tablas dentro de tablas, no es muy recomendable según las normas del código ligero, además, puede que te baste con celdas dentro de la primera tabla, pero pasando de este tema, sigamos...

No nos mencionas la maquetación de la página, así que pensaré en la que creo es más lógica.

Tienes la tabla que nos muestras y debajo (visualmente) estarán las capas con la información de alumnos y empresas.

Bueno, lo que has de hacer, es lo siguiente, te enumeraré los pasos de lo que el script debe contener; esos pasos son los que yo heusado cuando he hecho más o menos lo mismo que tú mencionas.

1. al hacer clic, se llama a la función a la cual le pasas los valores (nombre de capa por lo que veo).
2. ocultas todas las capas.
3. muestras la capa que te interesa.

Simple ¿no?

;)

Y hasta te pasaré un codigo, pero como no tengo demasiado tiempo ,te paso uno hecho hace un tiempo.

Solo funciona para navegadores versión 4, pues lo hice hace tiempo...

http://cvc.cervantes.es/actcult/

esa es la página y aquí está el script

http://cvc.cervantes.es/actcult/actcult.js

Por cierto que ya debería actualizar ese códgio

Suerte

Feliidad

fjmasero · #6 (**permalink**) 18/03/2004, 11:32

Nuevamente HOLA y GRACIAS PatomaS:

Q se me ha encendido la lucecita.

Te/os explico.

He hecho lo siguiente

Código:

var capa
var capasTipoLogin = new Array();
capasTipoLogin[0] = 'rbAlumnosEmpresas'
capasTipoLogin[1] = 'rbAlumnos'
capasTipoLogin[2] = 'rbEmpresas'

function cambiaCapa(idCapa){
 for (i=0; i<capasTipoLogin.length; i++) {
  //obtencion del objeto de la capa a visualizar
  if (document.layers) {
   capa = eval("document." + capasTipoLogin[i]);
  }
  if (document.all) {
   capa = eval(capasTipoLogin[i] + ".style");
  }
  if (document.getElementById) {
   capa = eval('document.getElementById("' + capasTipoLogin[i] + '").style');
  }
  
  if (i==idCapa) {   
    capa.display = "";
    capa.visibility = (document.layers) ? "show" : "visible" ;
  }
  else {
    capa.display = "none";
    capa.visibility = (document.layers) ? "hide" : "hidden" ;
  }
 }
}

Con esto, y con llamadas desde los enlaces con cambiaCapa(n), siendo n el numero de indice de la capa a mostrar, ya me funciona.

Eso si, las div deben estar dentro del td donde se visualizan. Concretamente, asi

Código:

                <td colspan="2" width="100%">
                  <div id="rbAlumnosEmpresas" name="rbAlumnosEmpresas" style="position: relative; top: 0; left: 0">
                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
                      <tr>
                        <td width="62" height="30" valign="middle" align="left">
                          <a href="#" onClick="establecerTipoLogin(this,'alumno');cambiaCapa(1); return false;" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('alumnos','','../images/alumnos_on.gif',1)">
                            <img name="alumnos" border="0" src="../images/alumnos_off.gif" width="52" height="9">
                          </a>
                        </td>
                        <td class="texto10_660000" align="center">|</td>
                        <td width="66" height="30" valign="middle" align="right">
                          <a href="#" onClick="establecerTipoLogin(this,'empresa');cambiaCapa(2); return false" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('empresas','','../images/empresas_on.gif',1)">
                            <img name="empresas" border="0" src="../images/empresas_off.gif" width="61" height="9">
                          </a>
                        </td>
                      </tr>
                    </table>
                  </div>
                  <div id="rbAlumnos" name="rbAlumnos" style="position: relative; top: 0; left: 0; visibility: hidden; display: none">
                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
                      <tr>
                        <td width="100%" height="30" valign="middle" align="center">
                          <img name="alumnos" border="0" src="../images/alumnos_on.gif" width="52" height="9">
                        </td>
                      </tr>
                    </table>
                  </div>
                  <div id="rbEmpresas" name="rbEmpresas" style="position: static; top: 0; left: 0; visibility: hidden; display: none; top: 0; left: 0">
                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
                      <tr>
                        <td width="100%" height="30" valign="middle" align="center">
                          <img name="alumnos" border="0" src="../images/empresas_on.gif" width="61" height="9">
                        </td>
                      </tr>
                    </table>
                  </div>
                </td>

siendo una de las claves q las capas q al cargarse la página no deben verse, q la propiedad display sea none.

Lo he probado en IE6, NS7 y Mozilla.

Salu2