Mostrare e nascondere righe di una tabella

[Pepo06]

Ciao a tutti,

io genero una tabella in modo dinamico tramite PHP.
Recupero dal database i vari valori e compongo una tabella che come uscita HTML sarà del tipo:

<table>
<tr>
<td>Fornitore 1: Ditta S.p.A.</td>
</tr>
<tr>
<td>viale Italia 1000 - 00000 Roma (Italia)

Tel 000000000

Fax 00000000</td>
</tr>
<tr>
<td>Fornitore 2: Ditta2 S.r.l.</td>
ecc ecc...
</table>

Mi interesserebbe che questa tabella diventasse una lista di:
+ Fornitore 1: Ditta S.p.A.
+ Fornitore 2: Ditta2 S.r.l.
.....

Dove se clicco sul + mi compaiono le informazioni sotto alla relativa riga.

Come posso fare?

PS: Ho già dato un'occhiata ad un articolo qua su HTML.it, ma non saprei come integrarlo alla generazione dinamica della mia tabella.

[cavicchiandrea]

Vorresti una cosa del genere http://javascript.html.it/script/lis...ound-e-sfondi/ (vedi) [+ informazioni] il codice sorgente è cosi:

<p id="p_4909" class="piu_info">Pi&ugrave; informazioni</p>

        <div id="info_4909" class="info" style="display: none;">
            

Animare uno sfondo con jQuery e il plugin Background-Position per ottenere accattivanti effetti sui menu</p>
            
        </div>

il javascript è marginale solo mostra/nascondi il grosso è lato server che genera tutto il codice.

[Pepo06]

Ok fatto.

ecco il codice che ho inserito.

Il JS da inserire nell'head:

<script type="text/javascript">
<!--
function getEl(id)
{
    element = document.getElementById(id);

    return element;
}

function hideEl(id)
{
    var element = getEl(id);

    element.style.display = 'none';
}

function showEl(id)
{
    var element = getEl(id);

    element.style.display = '';
}

function ShowHide(sid, last)
{
    //var p = document.images['plus_minus_' + sid];
    var el = 'info_' + sid;

    if(getEl(el).style.display == 'none') {

        var class_name = (last == true) ? 'meno_info ultimo' : 'meno_info';

        showEl(el);
        getEl('br_' + sid).className = class_name;
        getEl('href_' + sid).innerHTML = 'Meno informazioni';

    } else {

        var class_name = (last == true) ? 'piu_info ultimo' : 'piu_info';

        hideEl(el);
        getEl('br_' + sid).className = class_name;
        getEl('href_' + sid).innerHTML = 'Pi&ugrave; informazioni';

    }
}
//-->
</script>

Ed ecco la generazione della tabella:

<tr>    
               <td style='background-color: #E1E0E0;'>FORNITORE 1<br id='br_$ids' class='piu_info'>+ Più informazioni</p></td></tr>
               <tr id='info_$ids' class='info' style='display: none;'>
			   <td>

via dei Mille</td>
        </tr>

$ids recupera l'ID dal DB

[pegasobiu]

Scusate, io ho lo stesso problema e ho usato il vostro stesso metodo (io però uso il jsp ma in questo caso la differenza mi sembra marginale), solo che quando la tabella viene generata, ha un sacco di spazi vuoti. Mi spiego meglio: se io ho un elemento cui sono legati n sottoelementi, mi visualizza l'elemento mentre non visualizza i sottoelementi, d'altronde lascia uno spazio bianco tale da contenerli tutti. A voi non succede?

Elemento1
...
...
Elemento2
...
...
...
Elemento3
...
Elemento 4


spero di essere stata chiara...

grazie!!!!
ciao