scomparsa BLOCCO di elementi

**masdel1979** · 30-07-2008, 17:06

Ciao a tutti,
vorrei far scomparire un'intera colonna di una tabella con un click.

Il modo l'ho trovato e funziona:

Codice PHP:


function hiddenCol(name,tot_element){

  for(x=0;x<tot_element;x++){

    document.getElementById(name+x).style.display = "none";  

  }

}



<table>

 <tr> 

  <th id="col_name0">Nome</th>

  <th id="col_surname0">Cognome</th>

 </tr>

 <tr> 

  <td id="col_name1"></td>

  <td id="col_surname1"></td>

 </tr>

 <tr> 

  <td id="col_name2"></td>

  <td id="col_surname2"></td>

 </tr>

 <tr> 

  <td id="col_name3"></td>

  <td id="col_surname3"></td>

 </tr>

</table>

<a href="#" onClick="hiddenCol('col_name',3)">

questo ovviamente è solo un esempio, e la tabella la tiro fuori dinamicamente, anche con tr che rappresentano dettagli e altro.

In pratica adesso, volevo trovare una soluzione più "elegante", invece di andar a ciclare tutti gli elementi.

Come posso raggruppare, per esempio, tutta la colonna "name" con un unico identificativo (che ovviamente non è id, ma forse name?) e reperirne facilmente le informazioni dell'intero blocco?

Grazie, ciao Max

**masdel1979** · 30-07-2008, 19:10

niente?

ho trovato un'altra alternativa, ma è più lenta:

Codice PHP:


<html>

<head>

<style>

</style>

<script>

  function hiddenCol(col){

    var lista_td = document.getElementsByTagName("td");

    for(i=0; i < lista_td.length; i++){

      if(lista_td.item(i).getAttribute("name") == col){

        lista_td.item(i).style.display = "none";

      }

    }

  }

</script>

</head>

<body>

<table border="1">

 <tr>

  <td id="nome[uno]"><a href="#stop" onClick="hiddenCol('cognome')">Nome</td>

  <td name="cognome" id="i1">Cognome</td>

  <td name="eta">Eta</td>

 </tr>

 <tr>

  <td id="nome[due]">Pippo</td>

  <td name="cognome" id="i2">Caio</td>

  <td name="eta">12</td>

 </tr>

 <tr>

  <td id="nome[tre]">Max</td>

  <td name="cognome" id="i3">Biaggione</td>

  <td name="eta">34</td>

 </tr>

 <tr>

  <td id="nome[quattro]">Pippo</td>

  <td name="cognome" id="i4">Anastasio</td>

  <td name="eta">57</td>

 </tr>

</table>

</body>

</html>

ma esiste un modo per limitarne la ricerca ai soli tag che hanno come nome "cognome"? Perchè in questo modo mi scorre tutti i TD e non è bello..

Help me... saluti MAX

**dottwatson** · 31-07-2008, 01:54

scegli la piu appropriata

codice:

<html>
<head>
<style>
</style>
<script>
function hiddenCol(theIndex)
  {
  //alert(theIndex);
  var myTable=document.getElementById('lista_gente');
  for (var x=1; x < myTable.rows.length; x++) 
    {
    if (myTable.rows[x].cells[theIndex].style.visibility =='hidden')
        myTable.rows[x].cells[theIndex].style.visibility ='';  
    else
        myTable.rows[x].cells[theIndex].style.visibility ='hidden';
    }
  }

function deleteCol(theIndex)
  {
  //alert(theIndex);
  var myTable=document.getElementById('lista_gente2');
  for (var x=0; x < myTable.rows.length; x++) 
    {   
    myTable.rows[x].deleteCell(theIndex);
    }
  }

</script>
</head>
<body>
<table border="1" id="lista_gente">
<tr>
  <td>Nome</td>
  <td>Cognome</td>
  <td>Eta</td>
</tr>
<tr>
  <td>Pippo</td>
  <td>Caio</td>
  <td>12</td>
</tr>
<tr>
  <td>Max</td>
  <td>Biaggione</td>
  <td>34</td>
</tr>
<tr>
  <td>Pippo</td>
  <td>Anastasio</td>
  <td>57</td>
</tr>
</table>



<table border="1" id="lista_gente2">
<tr>
  <td>Nome</td>
  <td>Cognome</td>
  <td>Eta</td>
</tr>
<tr>
  <td>Pippo</td>
  <td>Caio</td>
  <td>12</td>
</tr>
<tr>
  <td>Max</td>
  <td>Biaggione</td>
  <td>34</td>
</tr>
<tr>
  <td>Pippo</td>
  <td>Anastasio</td>
  <td>57</td>
</tr>
</table>
</body>
</html>

**masdel1979** · 31-07-2008, 10:38

Ciao dottwatson,
come prima cosa, grazie per la risposta...

La tua soluzione sicuramente è la migliore, ma ho dimenticato di specificare che, devo avere la possibilità di poter riaprire la colonna, in un secondo tempo...

effettivamente il mio caso è questo, in particolare (lo riporto con un solo TD):

Codice PHP:


<table border="1" id="lista_gente">

 <tr>

  <td>[url="java-script: void(0)"]Eta[/url]</td>

  <td>[url="java-script: void(0)"][+][/url]</td>

</tr>

</table>

in sintesi, quando clicco su Eta, scompare la medesima colonna, ma compare una piccola colonna con un solo più (+); se clicco su (+) mi si riapre la colonna di prima.

Se non sbaglio, il tuo script cancella la colonna del tutto, giusto?

O c'è un modo per riprenderla in un secondo momento?

Ti saluto e ancora grazie, MAX

**dottwatson** · 31-07-2008, 10:54

ciao max

il tuo problema è questo:

- se usi un display 'none' assisti ad uno slittamento di tutta la colonna successiva, (nonè bello..)
- se usi un visibility 'hidden' tutto rimano incolonnato correttamente, ma non è possibile comprimere la colonna in quanto in essa i dati esistono ancora, e fanno larghezza...

**masdel1979** · 31-07-2008, 11:20

si si infatti dottwatson,
io voglio proprio questo risultato, ovvero lo slittamento delle colonne.

In pratica sto facendo un progetto dove tira fuori circa 30/40 colonne (il che è orrendo, lo so) e per ovviare a questa "oscenità", avevo pensato di creare questo script per permettere all'utente di nascondere le colonne che vuole.

Infatti, per questo uso il display:none, in modo tale che la colonna scompare del tutto..

Ma il problema è, che i tr, vengono generati dinamicamente, con circa tre cicli annidati, che danno voce, sottovoce e possibilità di un'altra sottovoce, etc etc.

Quindi ho dovuto fare un contatore unico, ed assegnato per ogni td interessato un id del tipo "id1", "id2", "idn"... poi in base al totale ciclo e faccio scomparire o comparire la colonna..

Ma come soluzione non mi piace tanto, preferivo mettere un nome per tutta la colonna, e con un javascript far scomparire (display:none) tutti gli elementi con quel dato nome, così evitavo di ciclare...

Non so se sono stato chiaro e se sono riuscito a farmi capire

Se hai ancora delle idee, sono contentissimo

ciao MAX

**dottwatson** · 31-07-2008, 11:29

mmhhhh.. ok

però poi devi trovare l' estetica corretta per questo giochino.... pensi di lasciarla così? o magari usare delle checkbox esterne alla tabella?

**masdel1979** · 31-07-2008, 11:37

Per ora utilizzo il click sulla colonna (e quando scompare sulla colonna del segno "+"), ma successivamente forse utilizzarò le checkbox esterne, ma quello non è un problema so come si fa, fortunatamente.

In questo caso, l'importante è accontentare il cliente, contento lui, contenti tutti, purtroppo..

Cmq, pensavo fosse più semplice... ma è possibile che in javascript non esiste un modo per dire "fai questo a tutti gli elementi che hanno il name uguale a pippo"?

stranezze della programmazione...

Ciao, ancora grazie, MAX

**dottwatson** · 31-07-2008, 12:13

hehhehehhe per questo esistono i framework

uno che tipossa aprire un pò piu l eporte è mootools..

un esempio

codice:

var coll=document.getElements('td[name=pippo]');

e hai già fatto

**masdel1979** · 31-07-2008, 14:01

grande "dottore" abbiamo risolto

posto tutto il codice del breve esempio, magari può servire a qualcuno:

Codice PHP:


<html>

<head>

<style>

</style>

<script src="mootools-1.2-core-nc.js"></script>

<script>

  

  function hiddenCol(col){

    var coll = document.getElements('td[name='+col+']');

    for(i=0; i < coll.length; i++){

      coll[i].style.display = "none";

    }

  }



</script>

</head>

<body>

<table border="1">

 <tr>

  <td name="nome"><a href="#stop" onClick="hiddenCol('nome')">Nome</td>

  <td name="cognome" id="i1">[url="#stop"]Cognome[/url]</td>

  <td name="eta">[url="#stop"]Eta[/url]</td>

 </tr>

 <tr>

  <td name="nome">Pippo</td>

  <td name="cognome" id="i2">Caio</td>

  <td name="eta">12</td>

 </tr>

 <tr>

  <td name="nome">Max</td>

  <td name="cognome" id="i3">Biaggione</td>

  <td name="eta">34</td>

 </tr>

 <tr>

  <td name="nome">Pippo</td>

  <td name="cognome" id="i4">Anastasio</td>

  <td name="eta">57</td>

 </tr>

</table>

</body>

</html>

ovviamente bisogna scaricare "mootools-1.2-core-nc.js"

grazie ancora "dottwatson" mi sembra un'ottima soluzione, ciao e buona giornata

Discussione: scomparsa BLOCCO di elementi

Strumenti discussione

Ricerca discussione

Visualizza

scomparsa BLOCCO di elementi

...

...

...

...

yes!!

Permessi di invio