Mootools Fx.Slide su più elementi contemporaneamente

[Paper-bat]

Salve a tutti,
non sono un esperto in javascript e sono incappato in un problemino, utilizzo mootools come framework.. intanto vi spiego cosa vorrei fare.

Ho una tabella e vorrei evitare di far vedere alcune righe con id "Eliminato", però allo stesso tempo cliccando su un pulsante vorrei che queste righe apparissero nei posti dove dovrebbero andare. Ecco qui sotto il codice che spiega di più:

<table id="ListaClienti">
  <tr class="title">
    <th>Nome</th>
    <th>Stato</th>
    <th>Modifica
Struttura SEO</th>
    <th>Modifica</th>
    <th>Elimina</th>
  </tr>
  <tr id="Eliminato">
    <td>pippo1</td>
    <td>Finito</td>
    <td>Struttura</td>
    <td>[url="modifica.php?percorso=pippo1.xml"]Modifica[/url]</td>
    <td>[url="elimina.php?percorso=pippo1.xml"]Elimina[/url]</td>
  </tr>
  <tr>
    <td>pippo2</td>
    <td>Eliminato</td>
    <td>Struttura</td>
    <td>[url="modifica.php?percorso=pippo2.xml"]Modifica[/url]</td>
    <td>[url="elimina.php?percorso=pippo2.xml"]Elimina[/url]</td>
  </tr>
</table> 

questa è invece la parte di javascript che ho fatto ma non sono sicuro al 100% che sia giusta :|

window.addEvent('domready', function() {
    var RaccoltaElementi = $$('tr#Eliminato td');
    
    $('test').addEvent('click', function(event){
        event = new Event(event);
        RaccoltaElementi.each(function(element) {
            alert(element);
            var eleFx = new Fx.Styles(element);
            eleFx.start({
                'height': 0
            });
        });
    });
}); 

Il mio problema che così com'è non riesco a farlo funzionare.. ma sono riuscito a farlo funzionare in un altro modo, cioè utilizzando le liste vi faccio vedere una riga come sarebbe venuta fuori

<ul><li id="Eliminato"><ul>
    <li style="width:300px;">pippo1
    <li style="width:60px;">Eliminato
    <li style="width:100px;" align="center">Struttura
    <li style="width:70px;">[url="modifica.php?percorso=pippo1.xml"]Modifica[/url]
    <li style="width:60px;">[url="elimina_cliente.php?percorso=pippo1.xml"]Elimina[/url][/list][/list]

// Qui sotto il javascript
window.addEvent('domready', function() {
    var IlMioElemento = $$('li#Eliminato');
    $('test').addEvent('click', function(event){
        event = new Event(event);
        IlMioElemento.each(function(element) {
            var eleFx = new Fx.Styles(element);
            eleFx.start({
                'height': 0
            });
        });
    });
}); 

spero sia chiaro quello che voglio fare.. con i "li" ovviamente funziona.. ma vorrei fare lo stesso con le tabelle.. perchè eviterei casini con i vari browser, e anche non mi piace molto come soluzione.

Il mio domandone è: come posso nascondere delle righe in una tabella??
Perchè se riesco anche con gli stili a nasconderla mi sta bene lo stesso, infatti con i mootools è possibile impostare le proprietà come si vuole.

Domandina: è capitato a qualcuno che provando a modificare delle proprietà degli stili (sempre con mootools), utilizzando una classe invece di uno id, lo script non funzioni senza dare errore?? (vedi codice sopra)

Aspetto risposte intanto ringrazio per chiunque voglia dare un contributo

[artorius]

Dunque, ci sono un paio di cose che non sono proprio chiare:
tu parli di id, ma lo sai che ci può essere UN id="Eliminato" nella pagina?
In secondo luogo l'height sulle tabelle ha sempre avuto dei problemi... ecco perché si raccomanda di non usarle nel layout della pagina.

Fx.Styles è usato per stili multipli, ti conviene usare Fx.Style e comunque, quello ti fa vedere l'effetto apertura alla pagina. In apertura dovresti averle chiuse, poi con un link, le apri con uno slide.

Comunque ti conviene usare la class non l'id, che funziona uguale

L'unico problema è che le tabelle sono poco personalizzabili, non puoi usare dei div con float:left;?

    [url="javascript:void(0)"]Click[/url]
</p>
<div id="Lista">
    <div id="header">
        <div class="Cell">
            Nome
        </div>
        <div class="Cell">
            Stato
        </div>
        <div class="Cell">
            Modifica
Struttura SEO
        </div>
        <div class="Cell">
            Modifica
        </div>
        <div class="Cell">
            Elimina
        </div>
    </div>
    <div class="Row Eliminato">
        <div class="Cell">
            pippo1
        </div>
        <div class="Cell">
            Finito
        </div>
        <div class="Cell">
            Struttura
        </div>
        <div class="Cell">
            [url="modifica.php?percorso=pippo1.xml"]Modifica[/url]
        </div>
        <div class="Cell">
            [url="elimina.php?percorso=pippo1.xml"]Elimina[/url]
        </div>
    </div>
    <div class="Row">
        <div class="Cell">
            pippo1
        </div>
        <div class="Cell">
            Finito
        </div>
        <div class="Cell">
            Struttura
        </div>
        <div class="Cell">
            [url="modifica.php?percorso=pippo1.xml"]Modifica[/url]
        </div>
        <div class="Cell">
            [url="elimina.php?percorso=pippo1.xml"]Elimina[/url]
        </div>
    </div>
</div> 

Con CSS:

#header{
    margin: 0px;
    padding: 0px;                
}
#header{
    width: 100%;
    float: left;
}
.Row{
    width: 100%;
    float: left;
    overflow: hidden;
}
.Cell{
    width: 20%;
    float: left;
}
#header .Cell{
    font-weight: bold;
    text-align: center;
}
.Eliminato{
    height: 0px;
} 

Poi fai lo script:

var toggled = false;            
window.addEvent('load', function(){
    $('click').addEvent('click', function(){
        $$('div.Eliminato').each(function(item){
            var tween = new Fx.Tween(item);
            tween.start('height', toggled ? 0 : 20);
            toggled = !toggled;
        })
    });
}); 

N.B io uso Mootools 1.2, ha diverse migliorie

[Paper-bat]

grande.. bellissima l'idea ed è proprio quello che volevo fare
così risolvo un sacco di problemi che avevo su[*]

grazie mille