Newsgroup: it.comp.lang.javascript
Titolo: visualizzazione righe nascoste di una tabella

Ciao a tutti.
Il mio dubbio è se farlo in JS senza dover ricorrere ad ASP.
Dunque ho una tabella di diciamo 10 righe.
Di queste vorrei che all'ingresso nella pagina venissero visualizzate le
prime 5.
Al click su un bottone vorrei come far apparire le altre 5, ovviamente dopo
quelle già visibili.
Ora vi chiedo:
1) Se la cosa è fattibile in JS.
2) Se è fattibile non vorrei che la pagina si ricaricasse...penso di no
perchè è JS
3) Avete mai visto qualche cosa di simile in giro, o meglio un URL su dove
prendere spunto e/o avere un punti di partenza
4) O uso ASP che è meglio...però ricaricherebbe....  : (((
Grazie e CIAO
Alen, Varese

metti i dati in 2 tabelle diverse (id tab1 - tab2), nella tab2 metti
style='display:none', onclick
document.getElementById('tab2').style.display="";
Se vuoi mantenere l'incolonnamento (e quindi la stessa tabella) la logica è
come sopra, solo che dovrai dare un id alle 5 <tr> nascoste e visualizzarle
come sopra

 </FORM>
ricorda di ricomporre la 3a riga
--
Ciao!
Davide

Ho fatto come mi hai detto...ho dato lo stesso ID a tutte le
celle...penso non sia un errore, ma mi continua a dare un errore di
sintassi?
---------------------------------------------------
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<FORM>
Clicca qui per una prova 
<INPUT TYPE="checkbox"
ONCLICK="document.getElementById('CellaNascosta').style.display="";>
  <a href="#"
ONCLICK="document.getElementById('CellaNascosta').style.display="";>+
dettagli</a> <BR>
  <table width="300" border="0" cellspacing="0" cellpadding="0">
    <tr> 
      <td>Nome</td>
    </tr>
    <tr> 
      <td>Cognome</td>
    </tr>
    <tr> 
      <td>Via</td>
    </tr>
    <tr> 
      <td>CAP</td>
    </tr>
    <tr> 
      <td>Citt&agrave;</td>
    </tr>
    <tr>
      <td bgcolor="#FFFF99" STYLE="display:none"
ID="CellaNascosta">Occupazione</td>
    </tr>
    <tr>
      <td bgcolor="#FFFF99" STYLE="display:none"
ID="CellaNascosta">Sistema Operativo</td>
    </tr>
    <tr>
      <td bgcolor="#FFFF99" STYLE="display:none"
ID="CellaNascosta">Livello</td>
    </tr>
    <tr>
      <td bgcolor="#FFFF99" STYLE="display:none"
ID="CellaNascosta">Societ&agrave;</td>
    </tr>
    <tr>
      <td bgcolor="#FFFF99" STYLE="display:none"
ID="CellaNascosta">Riferimento</td>
    </tr>
  </table>
  </FORM>
</body>
</html>
________________________________________________________________

-- 
Posted via Mailgate.ORG Server - 
http://www.Mailgate.ORG

Ti ringrazio del tuo esempio, mi è servito, ma vorrei sapere se c'è la
possibilità di non far si che gli elementi nascosti occupino spazio
nell'area della pagina.
Per capirci:
++++++++++
+++qui++++
+++c'è++++
++testo+++
++++++++++
qui l'elemento nascosto
che occupa uno spazio pari alla sua altezza.
++++++++++
++altro+++
++++++++++
Io vorrei questo:
++++++++++
+++qui++++
+++c'è++++
++testo+++
++++++++++
(l'elemento nascosto non vovrebbe occupare nessun tipo di
spazio...ovviamente dopo le crocine sopra si dovrebbe vedere ciò che
viene dopo l'elemento nascosta)
Si può fare in JS o per questo devo ricorrere ad ASP.
Grazie comunque del tuo prezioso aiuto.
BYE


stranissimo: display non dovrebbe lasciare spazio (mentre visibility credo
di sě)

l'id deve essere univoco
devi dare 5 nomi diversi alle 5 righe e dare il display="" a ognuna
Oppure cicli tra i vari id, del tipo (solo per IE, non ricordo per netscape6
come usare getElementById per avere la collection):
for(var x=0;x<document.all['CellaNascosta'].lenght;x++)
document.all('CellaNascosta',x).style.display='';

http://194.185.54.14/versione_4/intranet/Alen_Test/show_on_click_DYN.asp
Praticamente sono riuscito a farlo cosě...ma come potete vedere gli
spazi nascosti occupano spazio ed č quello che non voglio.
Come posso fare per far si che tutto rimanga uno via l'altro
CIAO e ancora grazie per la dritta....


Come ti hanno gia detto display non acuppa qua ti mando un pezzetone di
codice JavaScript piu HTML ,non ho verificato se funziona con altri tipi di
navigatori ma solamente IE 6.0.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
 <title>Prova tabelle nascoste</title>
 <script language="Javascript">
<!--
function SiNo(ButtonCaption)
{
if(ButtonCaption.value=="Rendere Visibile")
 {
      Tabella1.style.display="none"
      Tabella2.style.display="block"
      ButtonCaption.value="Rendere Invisibile"
   Bottone2.disabled=true
    }
 else
   {
    ButtonCaption.value="Rendere Visibile"
    Tabella1.style.display="block"
    Tabella2.style.display="none"
 Bottone2.disabled=false
   }
}
function Vedi()
{
var Stile_Tabella2=Tabella2.style.display
if (Tabella2.style.display=="none")
   {
   Tabella2.style.display="block"
   Bottone1.disabled=true
   }
   else
   {
   Tabella2.style.display="none"
   Bottone1.disabled=false
   }
}
//-->
</script>
</head>
<body>
<table id="Tabella1"  border="1" width="150">
<tr><td>Nome</td></tr>
<tr><td>Cognome</td></tr>
<tr><td>Via</td></tr>
<tr><td>CAP</td></tr>
<tr><td>Citt&agrave;</td></tr>
</table>
<table id="Tabella2" border="1" width="150" style="display: none">
<tr><td>Ocupazione</td></tr>
<tr><td>Titolo di Studio</td></tr>
<tr><td>Data di Nascita</td></tr>
<tr><td>qualcosa d'altro</td></tr>
<tr><td>non lo so</td></tr>
</table>
<P>Questa linea per vedere che la tabella 2 non ocupa spazio<p>
<input id="Bottone1" type="button" value="Rendere Visibile"
OnClick="SiNo(this)">
<input id="Bottone2" type="button" value="Questo Bottone per vedere la
tabella nascosta" OnClicK="Vedi()">
</body>
</html>
Ciao L'Oriundo

 navigatori ma solamente IE 6.0.
----------------------------------------------
Perfetto ci sono riuscito....GRAZIE!!
http://www.odm.it/test/NG_lineafit.asp
P.S.: una domandina esagerosa....in Netscape 6.0 non va.
Si riesce ad avere la compatibilità anche qui....poi non chiedo + nulla...
GRAZIE!!!!!


Prego
Comunque ci sono due cose che vorei dirti
1- ho visto il tuo esempio in rete é ho notato che hai ripetuto la funzione
vedi per n = al numero delle tabelle.
Adesso prova ad imaginare se tu avessi 100 o piu  nominativi e non volessi
cambiare pagina per mostrali cosa fai ripeti 100 volte la funzione vedi ,
credo che no ti convenga.
La soluzione e quella di passare parametri al procedimento vedi().
Nel evento OnClick dei vari bottoni semplicemete metti il nome della tabella
che devi elaborare per renderla visibile.
Esempio
<Script Lamguage="JavaScript">
function Vedi1(TabellaN) /* TabellaN e l'argomento che riceve il
procedimento Vedi1 e sara uguale con tutte le sue carateristiche(proprieta e
atributi) al argomento inviato dalla chiamata del evento OnClik del Bottone
*/
{
/*var Stile_Tabella1=Tabella1.style.display  Elimina questa linea perche non
serve e stato un mio errore di battitura*/
if (TabellaN.style.display=="none")
   {
   TabellaN.style.display="block"
   }
   else
   {
   TabellaN.style.display="none"
   }
}
</Script>
<body>
<table id="Tabella1">
<!--Questo qua sotto e il bottone della Tabella1-->
<input id="Bottone2" type="button" value="+ Dettagli"
onClick="Vedi1(Tabella1);return false;" name="button">
<tr>..............
</table>
<!--Questo qua sotto e il bottone della Tabella2-->
<input id="Bottone2" type="button" value="+ Dettagli"
onClick="Vedi1(Tabella2);return false;" name="button">
<!--Questo qua sotto e il bottone della TabellaN-->
<input id="Bottone2" type="button" value="+ Dettagli"
onClick="Vedi1(Tabella100);return false;" name="button">
Spero di essere stato chiaro se no dimello che ci riprovo :)
2-Per la compatibilita con NetScape 6.0
Onestamente non posso solo dirti di fare un salto
http://developer.netscape.com/evangelism/docs/technotes/xref/dom-css-style-o
bject/ tutto su una riga perché da quello che mi risulta dovrebbe essere
compatibile, fammi sapere se ci riesci.
Ciao e spero che ti sia stato d'aiuto
L'Oriundo

 vedi per n = al numero delle tabelle.
Si č vero, ma la vedi solo tu sul client.
Il codice č integrato con ASP ed č una riproduzione ciclica di un unico
blocco di codice...viene esploso in X volte quando lo vedi.
Comunque sia proverņ con il tuo consiglio che mi hai dato se questo potrą
migliorare la mia pagina.
2-Per la compatibilita con NetScape 6.0
Onestamente non posso solo dirti di fare un salto
http://developer.netscape.com/evangelism/docs/technotes/xref/dom-css-style-o
bject/ tutto su una riga perché da quello che mi risulta dovrebbe essere
compatibile, fammi sapere se ci riesci.
OK, standBY
GRAZIE.
Alen

Ciao Togli il standBY e VAI :)
Copatibile IE 5.5 e NS 6.0
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title>Prova tabelle nascoste</title>
  <script language="Javascript">
<!--
function SiNo(ButtonCaption)
{
if(document.getElementById(ButtonCaption).value=="Rendere Visibile")
{
document.getElementById("Tabella1").style.display="none"
document.getElementById("Tabella2").style.display="block";
document.getElementById(ButtonCaption).value="Rendere Invisibile"
document.getElementById("Bottone2").disabled=true
 }
 else
 {
document.getElementById(ButtonCaption).value="Rendere Visibile"
document.getElementById("Tabella1").style.display="block"
document.getElementById("Tabella2").style.display="none"
document.getElementById("Bottone2").disabled=false
  }
}
function Vedi()
{
if (document.getElementById("Tabella2").style.display=="none")
   {
document.getElementById("Tabella2").style.display="block"
   document.getElementById("Bottone1").disabled=true
   }
else
{
   document.getElementById("Tabella2").style.display="none"
   document.getElementById("Bottone1").disabled=false   }
}
//-->
</script>
</head>
   <body>
<table id="Tabella1" border="1" width="150">
     <tr><td>Nome</td></tr>
    <tr><td>Cognome</td></tr>
    <tr><td>Via</td></tr>
    <tr><td>CAP</td></tr>
    <tr><td>Citt&agrave;</td></tr>
 </table>
<table id="Tabella2" border="1" width="150" style="display: none; ">
 <tr> <td>Ocupazione</td></tr>
 <tr><td>Titolo di Studio</td></tr>
 <tr><td>Data di Nascita</td></tr>
 <tr><td>qualcosa d'altro</td></tr>
 <tr><td>non lo so</td></tr>
 </table>
<p>Questa linea per vedere che la tabella 2 non ocupa spazio</p>
<p><input id="Bottone1" type="button" value="Rendere Visibile"
onclick="SiNo(
this.id
)"><input id="Bottone2" type="button" value="Questo
Bottone per vedere la tabella nascosta" onclick="Vedi()"></p>
</body>
</html>
Spero che ti possa aiutare con il tuo codice, se lavori un po sul passagio
dei parametri non hai bisogno di usare molto
<% document.write() %> :)P
Ciao  L'Oriundo


Perdon volevo dire <% Response.Write () %> =8-)
Ciao un  Oriundo frettoloso.

 ha scritto nel messaggio
news:acrftd$t04$1...@newsreader.mailgate.org...

_________________________________
GRAZIE x il tuo prezioso aiuto, sia qui che nel mio altro post SOPRA.
ORA MONTO!!!!
BYE
ALEN

 ha scritto nel messaggio
news:acrftd$t04$1...@newsreader.mailgate.org...

__________________________________________
http://www.odm.it/test/mostra_tabella_IE_N60.asp
Guarda che strano...
Funziona però quando clicco il bottone con Netscape 6.01 (io ho installato
questo), mi fa uno strano effetto sulla tabella che appare. Non so se tu lo
vedi, forse hai una versione + nuova, però mi da come una spaziatura tra le
celle...mentre in IE è perfetto.
Lo vedi anche tu con questo difetto o lo vedi OK?
BYE e TNKS

 ha scritto nel messaggio
news:acrftd$t04$1...@newsreader.mailgate.org...
__________________________________
OK ci sono riuscito ho unito le due funzioni che mi hai dato, però come ti
dicevo in Netscape 6.0 fa uno strano scherzo sulla tabella che appare.
Comunque per me è già un successo.
Penso sia un problem di questa versione di Net 6.01.
http://www.odm.it/test/ng_lineafit.asp
----------------QUESTO è il COD----------------
 <script language="Javascript">
<!--
<% for frmItem = 1 to 6 %>
function Vedi<%= frmItem %>()
{
if (document.getElementById("Tabella<%= frmItem %>").style.display=="none")
   {
document.getElementById("Tabella<%= frmItem %>").style.display="block"
   }
else
{
   document.getElementById("Tabella<%= frmItem %>").style.display="none"
}
}
function cambia_testo<%= frmItem %>(id){
if(document.getElementById(id).value=="+ Dettagli")
{
document.getElementById(id).value="- Dettagli";
}
else
{
document.getElementById(id).value="+ Dettagli";
}
}
<% next %>
//-->
</script>
----------------------------
+ ottimizzato di così non penso si possa fare....BYE e GRAZIE!


Ciao io peZavo una cosa cosi pero sulle tabelle non sul lo script :
Perche da quello che so gli script sono caricati in memoria
Di posto il Codice
<%@ Language=VBScript %>
<% Option Explicit %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="Javascript">
<!--
function Vedi(Bottone,a)
{
var Tabella= "Tabella" + a
if (document.getElementById(Bottone).value=="+ Dettagli")
   {
document.getElementById(Tabella).style.display="block"
document.getElementById(Bottone).value="- Dettagli"
   }
else
{
   document.getElementById(Tabella).style.display="none"
   document.getElementById(Bottone).value="+ Dettagli"
}
}
//-->
</script>
</head>
<body>
<% Dim x
For x=1 to 6
Response.Write (x) %>
<table width="100%" border="1" cellspacing="0" cellpadding="0"
bgcolor="#0066FF">
<tr> <td width="70%">&nbsp;</td>
<td width="30%">
<input type="button" id="Bottone<%= x %>" value="+ Dettagli"
OnClick="Vedi(
this.id
,<%= x %>);return false;" name="button1">
</td>
</tr>
</table>
<table border="1" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td class="altodestrara" width="170"><b>&nbsp;Nome e Cognome</b></td>
<td class="altodestrara">&nbsp;</td>
</tr>
<tr>
<td class="altodestrara" width="170" bgcolor="#FFF3E1">
<b>&nbsp;Livello utente</b></td>
<td class="altodestrara" bgcolor="#FFF3E1" >&nbsp;</td>
</tr>
<tr> <td class="altodestrara" width="170"><b>&nbsp;Username</b></td>
<td class="altodestrara">&nbsp;</td>
</tr>
<tr> <td class="altodestrara" width="170"
bgcolor="#FFF3E1"><b>&nbsp;Password</b></td>
<td class="altodestrara" bgcolor="#FFF3E1">&nbsp;</td>"
</tr>
<tr> <td class="altodestrara" width="170"><b>&nbsp;E-mail</b></td>
<td class="altodestrara">&nbsp;</td>
</tr>
</table>
<table id="Tabella<%= x %>" border="1" cellspacing="0" cellpadding="0"
width="100%" style="display: none;">
<tr bgcolor="#CCCC00" width="170"> <td class="altodestrara" >aaaaaaa</td>
<td class="altodestrara">&nbsp;</td>
</tr>
<tr bgcolor="#CCCC00"> <td class="altodestrara" width="170">aaaaaaaaa</td>
<td class="altodestrara">&nbsp;</td>
</tr>
<tr bgcolor="#CCCC00"> <td class="altodestrara" width="170">aaaaaaaaa</td>
<td class="altodestrara">&nbsp;</td>
</tr>
<tr bgcolor="altodestrara"> <td class="altodestrara"
width="170">aaaaaaaaaa</td>
<td class="altodestrara">&nbsp;</td>
</tr>
<tr bgcolor="altodestrara"> <td class="altodestrara"
width="170">aaaaaaaaaa</td>
<td class="altodestrara">&nbsp;</td>
</tr>
</table>
<br>
<% Next %>
</body>
</html>
Per le tavole di NS onestamente non so perche erano come due anni che non lo
toccavo piu
Ciao L'Oriundo


TANTO di CAPPELLO.....grande!
Questa mi č piaciuta :-))))
"peZavo" ...io invece non ci peZavo proprio come hai fatto tu  ; )

_Ho aggiunto una tabella di chiusura al piede.
Il suo ID č "chiusura"...farņ qualche studipo errore che non riesco a
capire...mi continua a dare errore.
Dove sbaglio?
GRAZIE e Ciao
___________________________________________________
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
 <title>Prova tabelle nascoste</title>
<script language="Javascript">
<!--
function Vedi(Bottone,a,chiusura)
{
var Tabella= "Tabella" + a
if (document.getElementById(Bottone).value=="+ Dettagli")
   {
document.getElementById(Tabella).style.display="block"
document.getElementById(Bottone).value="- Dettagli"
document.getElementById(chiusura).style.display="none"
   }
else
{
   document.getElementById(Tabella).style.display="none"
   document.getElementById(Bottone).value="+ Dettagli"
   document.getElementById(chiusura).style.display="block"
}
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
<p>
<%
Dim x
For x=1 to 6
%>
<table width="100%" border="0" cellspacing="0" cellpadding="0"
bgcolor="#0066FF">
  <tr>
    <td width="70%">&nbsp;</td>
    <td width="30%">
      <input type="button" id="Bottone<%= x %>" value="+ Dettagli"
onClick="Vedi(
this.id
,<%= x %>);return false;" name="button<%= x %>">
    </td>
  </tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
  <tr>
    <td class="altodestrara" width="170"><b>&nbsp;Nome e Cognome</b></td>
    <td class="altodestrara">&nbsp;</td>
  </tr>
  <tr>
    <td class="altodestrara" width="170" bgcolor="#FFF3E1"><b>&nbsp;Livello
utente
      </b></td>
    <td class="altodestrara" bgcolor="#FFF3E1" >&nbsp;</td>
  </tr>
  <tr>
    <td class="altodestrara" width="170"><b>&nbsp;Username</b></td>
    <td class="altodestrara">&nbsp;</td>
  </tr>
  <tr>
    <td class="altodestrara" width="170"
bgcolor="#FFF3E1"><b>&nbsp;Password</b></td>
    <td class="altodestrara" bgcolor="#FFF3E1">&nbsp;</td>
  </tr>
  <tr>
    <td class="altodestrara" width="170"><b>&nbsp;E-mail</b></td>
    <td class="altodestrara">&nbsp;</td>
  </tr>
</table>
<table id="Tabella<%= x %>" border="0" cellspacing="0" cellpadding="0"
width="100%" style="display: none;">
  <tr bgcolor="#CCCC00">
    <td class="altodestrara" width="170">aaaaaaa</td>
    <td class="altodestrara">&nbsp;</td>
  </tr>
  <tr bgcolor="#CCCC00">
    <td class="altodestrara" width="170">aaaaaaaaa</td>
    <td class="altodestrara">&nbsp;</td>
  </tr>
  <tr bgcolor="#CCCC00">
    <td class="altodestrara" width="170">aaaaaaaaa</td>
    <td class="altodestrara">&nbsp;</td>
  </tr>
  <tr bgcolor="#CCCC00">
    <td class="altodestrara" width="170">aaaaaaaaaa</td>
    <td class="altodestrara">&nbsp;</td>
  </tr>
  <tr bgcolor="#CCCC00">
    <td class="altodestrara" width="170">aaaaaaaaaa</td>
    <td class="altodestrara">&nbsp;</td>
  </tr>
</table>
<table id="chiusura<%= x %>" border="0" cellspacing="0" cellpadding="0"
width="100%" style="display: block;" bgcolor="#FF0000" name="chiusura">
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
</table>
<br>
<% next %>
<P>&nbsp;
</body>
</html>

 onClick="Vedi(
this.id
,<%= x %>);return false;" name="button<%= x %>">
[CUT]
Se osservi attentamente queste due righe di codice trovi l'errore:
Praticamente tu gli dici alla tua funzione che arriveranno tre paramentri ma
realmente ne "spedischi solamente due".
Poi dentro la funzione gli dici pure
adesso voglio che l'ogetto indentificato con il Id "chiusuraN" deve cambiare
la sua visibilita e giustamente la funzione di dice
Vabene ma dove capero é l'oggetto "chiusuraN" se non  me lo presenti non lo
conosco ,quindi becati sto  errore.
Detto questo ti ricordo il Post dove chiedo perche NS si comporta in modo
strano e quindi devi aplicare il sotterfugio per far si che NS riconoscha
l'oggetto "chiusura1".
Quindi avremo :
function Vedi(Bottone,a)
var Tabella= "Tabella" + a
var chiusura="chiusura" + a
perché sia "Tabella1" che "chiusura1"  terminano con 1 in questo caso
Spero che ti abbia aiutato a capire il concetto ,
Ciao L'Oriundo

 Ciao L'Oriundo
[CUT]
Grazie 1000 x la pazienza!!!
Vala + una spiegazione come la tua che un codi bello che pronto.
Ancora grazie di cuore.
P.S.: Sscusa se l'ho postato anche come nuovo POST, ma magari non guardavi +
la pila di repliche.
Fammi sapere se qualche d'uno ti risolve il problem di Netscape...starò
attento anch'io alle repliche.
BYE

 [CUT]
PERFETTO CI SONO Riuscito. Grazie della lezioncina.