Tableau dynamique de profondeur 4

Bonjour,
Je m'explique rapidement. J'essaye de réaliser une interface pour consulter une base de donnée.
Je voudrais voir afficher au début ce tableau :
http://img144.imageshack.us/img144/2584/capturedcran20100402190.png
Et quand on clique sur une ligne, que ça mette la famille de ce domaine (un sous tableau) :
http://img202.imageshack.us/img202/6413/capturedcran20100402190.jpg
J'ai fait le code php pour tracé tout mon tableau en récupérant les données sur la BDD :

echo '<table>';
echo '<thead><!-- En-tête du tableau -->';
echo '<tr>';
echo '<th></th>';
echo '<th></th>';
echo '</tr>';
echo '</thead>';
foreach($reponse as $ligne){
	echo '<tr class="domaine">';
	echo '<td>'.htmlspecialchars($ligne['code_domaine']).'</td>';
	echo '<td>'.htmlspecialchars($ligne['libelle_domaine']).'</td>';
	echo '</tr>';
	$domaine = $ligne['code_domaine'];
	$suite = $mysql->requete('SELECT * FROM Famille WHERE code_famille LIKE "'.$domaine.'%" ORDER BY code_famille');
	foreach($suite as $ligne){
		echo '<tr class="famille">';
		echo '<td>'.htmlspecialchars($ligne['code_famille']).'</td>';
		echo '<td>'.htmlspecialchars($ligne['libelle_famille']).'</td>';
		echo '</tr>';
		$famille = $ligne['code_famille'];
		$suite2 = $mysql->requete('SELECT * FROM Equipement WHERE code_famille LIKE \'%'.$famille.'%\' ORDER BY type_d_equipement');
		foreach($suite2 as $ligne){
			echo '<tr class="equipement">';
			echo '<td>'.htmlspecialchars($ligne['type_d_equipement']).'</td>';
			echo '<td>'.htmlspecialchars($ligne['dv_th_ans']).' ans '.htmlspecialchars($ligne['taux_de_renouvellement']).'</td>';
			echo '</tr>';
			$equipement = $ligne['type_d_equipement'];
			$suite3 = $mysql->requete('SELECT * FROM Gamme WHERE type_d_equipement LIKE \'%'.$equipement.'%\' ORDER BY jours');
			foreach($suite3 as $ligne){
				echo '<tr class="gamme">';
				echo '<td>'.htmlspecialchars($ligne['tache_de_maintenance']).'</td>';
				echo '<td>'.htmlspecialchars($ligne['periodicite']).'</td>';
				echo '</tr>';
			}
		}
	}
}
echo '</table>';

Dans le CSS, j'ai caché pour le moment toutes les classes sauf domaine :

tr.domaine {
background-color: #ADFF2F;	
}
tr.famille {
background-color: #D75951;
display:none;
}
tr.equipement {
background-color: #A9A9A9;
display:none;	
}
tr.gamme {
background-color: #FF7F50;
display:none;	
}

Il me reste donc à faire la fonction javascript pour :
1) Détecter le clic d'un utilisateur sur une ligne de class domaine
2) Décacher le tableau class famille correspondant (pas tous !)
Et si il reclique sur un différent :
1) Recacher le tableau que l'on avait afficher
2) Décacher l'autre tableau qu'il a demandé
Et si il reclique sur le même (celui déjà ouvert) :
1) Recacher celui qui était ouvert
2) Et c'est tout

Voilà je ne connais pas trop les fonctions javascript donc si vous pouvez m'aiguiller sur les fonctions que je pourrais utiliser.

Merci
Modifié par crashray (02 Apr 2010 - 19:42)