tabella espandibile in javascript

**luca7** · 07-01-2004, 22:28

salve, non conosco molto il javascript se non ai livelli di principiante; nella mia pagina ho una tabella di altezza 200px e per problemi di spazio la vorrei ridurre a 100px e con uno script fare in modo che questa sia espandibile a 200px; vorrei insomma fare una cosa del genere

esempio

solo che farlo quando si clicca e non farlo con un immagine ma con una tabella

un altro esempio potrebbe essere questo (bisogna cliccare su "calendario" per vedere l'effetto che vorrei)

mi date una mano? non vi chiedo di scrivermi il codice da 0, ma magari qualche correzione agli script che vi ho citato o qualche link utile...grazie infinte

**luca7** · 08-01-2004, 20:22

ma non è proprio possibile? qualche consiglio alternativo tipo script server-side?

**Xinod** · 08-01-2004, 22:08

lato server non mi sembra molto pratico

lato client è una cosa fattibilissima e semplice (es. calendario),
è solo un div a cui viene cambiato il display,
ma tu vorresti nascondere parti di una tabella
quindi quasi sicuramente righe e usando lo stesso sistema con tag <tr> limiteresti la compatibilità al solo IE

se invece il contenuto da nascondere è tutto nella stessa cella non ci sono problemi
fammi sapere

**luca7** · 08-01-2004, 22:19

avevo pensato a quello che avevi detto tu e credevo di risolverlo associando di default altezza 100px, poi con l'evento onClick si nascondeva la tabella da 100px e si mostrava completamente quella da 200px precedentemente nascosta

ti posto il codice per capirci meglio

codice:

<table width="500" align="center" border="0" cellpadding="0" cellspacing="1" bgcolor="#279A62">
  <tr>
    <td width="500" height="202" valign="middle" bgcolor="#FFFFFF">
      <marquee behavior="scroll" direction="up" height="200" scrolldelay="50" scrollamount="1"
      onmouseover='this.stop()' onmouseout='this.start()'>
        <div>
          testo
        </div>
      </marquee>
    </td>
  </tr>
</table>

**Xinod** · 08-01-2004, 22:31

ok, se sono 2 tabelle diverse non dovrebbero esserci problemi, prova

codice:

<script type="text/javascript">
function riduci_espandi(){
if(document.getElementById('ridotta').style.display=='block'){
document.getElementById('ridotta').style.display=='none'
document.getElementById('espansa').style.display=='block'
}
else{
document.getElementById('ridotta').style.display=='block'
document.getElementById('espansa').style.display=='none'
}
}
</script>

riduci/espandi
<table id="ridotta" style="display:block">
...
</table>
<table id="espansa" style="display:none">
...
</table>

ciao

**luca7** · 08-01-2004, 22:43

codice:

<head>
<script type="text/javascript">
function riduci_espandi(){
if(document.getElementById('ridotta').style.display=='block'){
document.getElementById('ridotta').style.display=='none'
document.getElementById('espansa').style.display=='block'
}
else{
document.getElementById('ridotta').style.display=='block'
document.getElementById('espansa').style.display=='none'
}
}
</script>
</head>
<body>
riduci/espandi
<table id="ridotta" style="display:block" width="100" height="100" border="1">
<tr><td></td></tr>
</table>
<table id="espansa" style="display:none" width="100" height="200" border="1">
<tr><td></td></tr>
</table>
</body>

così non mi funziona...forse ho sbagliato io ma non capisco dove...

**Xinod** · 08-01-2004, 23:35

mi ha preso di mano il ctrl c/ctrl v

codice:

<head>
<script type="text/javascript">
function riduci_espandi(){
if(document.getElementById('ridotta').style.display=='block'){
document.getElementById('ridotta').style.display='none'
document.getElementById('espansa').style.display='block'
}
else{
document.getElementById('ridotta').style.display='block'
document.getElementById('espansa').style.display='none'
}
}
</script>
</head>
<body>
riduci/espandi
<table id="ridotta" style="display:block" width="100" height="100" border="1">
<tr><td></td></tr>
</table>
<table id="espansa" style="display:none" width="100" height="200" border="1">
<tr><td></td></tr>
</table>
</body>

**luca7** · 09-01-2004, 00:07

perfetto funziona!!!grazie mille

una domanda extra: dentro la cella ho un marquee che quindi viene ridimensionato come la <td>, il problema è che explorer lo gestisce correttamente mentre mozilla no. so che il tag marquee è solo per explorer e che mozilla lo gestisce solo con le versioni più recenti, però non so se commetto qualche errore di sintassi io

codice:

...inizio tabella e celle con <table id="ridotta" style="display:block">
<marquee behavior="scroll" direction="up" height="100" scrolldelay="50" scrollamount="1"
onmouseover='this.stop()' onmouseout='this.start()'>
...testo...
</marquee>
...chiusura tabella e celle...

...inizio tabella e celle con <table id="espansa" style="display:none">
<marquee behavior="scroll" direction="up" height="200" scrolldelay="50" scrollamount="1"
onmouseover='this.stop()' onmouseout='this.start()'>
...testo...
</marquee>
...chiusura tabella e celle...

**birikkino** · 16-02-2004, 11:47

bellissimo questo script! propio quello che cercavo....ma dì un pò: si può anche far aprire la tabella verso l'alto?

**Xinod** · 16-02-2004, 15:01

(finchè parliamo di elementi in posizionamento relativo)
se un elemento prima non occupava spazio e dopo lo occupa è normale che sposti tutto quello che lo segue verso il basso
se vuoi si può giocare con la visibilità, ma la parte nascosta occupa spazio anche da invisibile

codice:

<head>
<script type="text/javascript">
function mostra_nascondi(){
var el=document.getElementById('box').style
el.visibility=(el.visibility=='visible')?'hidden':'visible'
}
</script>
</head>
<body>
<div id="box" style="visibility:hidden">
elemento inizialmente nascosto,

occupa cmq spazio anche da invisibile

perchè è nascosto tramite visibility


...
</div>
mostra/nascondi
</body>

soluzioni alternative sono parecchio + complesse
(specie se da applicare a layout tabellari...)

Discussione: tabella espandibile in javascript

Strumenti discussione

Ricerca discussione

Visualizza

tabella espandibile in javascript

Permessi di invio