far scomparire righe tabella in css

**james** · 22-08-2007, 20:47

Prima di provare a farlo con il javascript (che non mi garba molto), è possibile in CSS far apparire e scomparire delle righe di una tabella cliccando su un link?

Praticamente ho una tabella con moltissimi campi da compilare, quindi vorrei poter nascondere alcuni campi "superflui" e renderli visibili solo cliccando un tasto, per semplificare il form, sarebbe poi interessante poterli anche nascondere nuovamente.

**salasir** · 23-08-2007, 08:11

Mi ero salvato tempo fa un esempio da questo forum per una richiesta di mostra/nascondi, che mi sembra possa essere utilizzato per le tue esigenze. Ovviamente da adattare ...

Usa javascript, ma non credo ci siano molte alternative ...

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">


<head>
   <title>Prova con le Liste Non Ordinate</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <style type="text/css"><!--
   * { margin:0; padding:0 }
   body { padding:3em }
   div {
      padding:50px;
      background-color:#ff3;
   }
   li {
      margin-left:30px; margin-top:0.25em; margin-bottom:0.25em;      
      background-color:#9ff;
   }
   .nascosto {
      position:absolute;
      top:-500px;
      width:1px; height:1px;
      overflow:hidden;
   }
   --></style>
   <script type="text/javascript"><!--
   var elementi = new Array();
   elementi[0] = 'div-1-1';
   elementi[1] = 'div-1-2';
   elementi[2] = 'div-2-1';
   // e via dicendo

   function nascondi() {
      for (var i = 0; i < elementi.length; i++) {
         document.getElementById(elementi[i]).className = 'nascosto';
      }
   }
   function mostra() {
      for (var i = 0; i < elementi.length; i++) {
         document.getElementById(elementi[i]).className = '';
      }
   }
   //--></script>
</head>

<body>
   <div>
      <ul>
         <li id="div-1-1">Ciao
         <li id="div-1-2">Miao
         <li id="div-2-1">Bau[/list]
   </div>
   

Mostra / 
   Nascondi</p>
</body>

</html>

**james** · 23-08-2007, 16:26

Originariamente inviato da salasir
Mi ero salvato tempo fa un esempio da questo forum per una richiesta di mostra/nascondi, che mi sembra possa essere utilizzato per le tue esigenze. Ovviamente da adattare ...

Usa javascript, ma non credo ci siano molte alternative ...

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">


<head>
   <title>Prova con le Liste Non Ordinate</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <style type="text/css"><!--
   * { margin:0; padding:0 }
   body { padding:3em }
   div {
      padding:50px;
      background-color:#ff3;
   }
   li {
      margin-left:30px; margin-top:0.25em; margin-bottom:0.25em;      
      background-color:#9ff;
   }
   .nascosto {
      position:absolute;
      top:-500px;
      width:1px; height:1px;
      overflow:hidden;
   }
   --></style>
   <script type="text/javascript"><!--
   var elementi = new Array();
   elementi[0] = 'div-1-1';
   elementi[1] = 'div-1-2';
   elementi[2] = 'div-2-1';
   // e via dicendo

   function nascondi() {
      for (var i = 0; i < elementi.length; i++) {
         document.getElementById(elementi[i]).className = 'nascosto';
      }
   }
   function mostra() {
      for (var i = 0; i < elementi.length; i++) {
         document.getElementById(elementi[i]).className = '';
      }
   }
   //--></script>
</head>

<body>
   <div>
      <ul>
         <li id="div-1-1">Ciao
         <li id="div-1-2">Miao
         <li id="div-2-1">Bau[/list]
   </div>
   

Mostra / 
   Nascondi</p>
</body>

</html>

Grazie dell'aiuto, ma è sicuro che non ci siano strade alternative in CSS?! Purtroppo ho una forte allergia vs il javascript!

**Mich_** · 23-08-2007, 16:42

Originariamente inviato da james
Grazie dell'aiuto, ma è sicuro che non ci siano strade alternative in CSS?! Purtroppo ho una forte allergia vs il javascript!

Se vuoi un effetto al click, in pratica oggi devi usare JS.

Se invece l'effetto lo vuoi/ti puo` andar bene all':hover allora e` possibile usare solo CSS: ci sono molti esempi in rete, ti consiglio di vedere le raccolte di menu con parti a comparsa, ad esempio i menu a tab o a "slide" (alcuni riferimenti nei "link utili").

**Rgloyer** · 23-08-2007, 21:54

Se si usa soltanto il :hover di css cè peró il problema che IE (oh lo amo tanto) lo accetta soltanto per i link. Quasi tutti gli altri browser lo interpretano giusto.

Alternativa a JavaScript sarebbe usare qualche linguaggio del tipo PHP. Lo svantaggio e che la pagina verrebbe ricaricata a ogni click.

**james** · 25-08-2007, 21:25

grazie dei consigli, vada per js anche se non mi piace un gran che.

Discussione: far scomparire righe tabella in css

Strumenti discussione

Ricerca discussione

Visualizza

far scomparire righe tabella in css

Permessi di invio