Afficher / cacher différentes lignes d'un tableau

Version imprimable

Salut à tous !

Je bloque depuis pas mal de temps en ce qui concerne l'apparition de ligne <TR></TR>.

Le soucis, c'est qu'elles sont dynamiques. Voici un schéma :

________________________________________

id1, projet1, date1, caracteristiques1 [afficher(1)]
________________________________________

id2, projet2, date2, caracteristiques2 [afficher(2)]
________________________________________

Après avoir cliqué sur afficher(1) et afficher(2) :
________________________________________

id1, projet1, date1, caracteristiques1 [cacher(1)]
________________________________________

<tr>id1_descriptif 1 [ajouter] [supprimer] </tr>
----------------------------------------------
<tr>id1_descriptif 2 [ajouter] [supprimer] </tr>
________________________________________

id2, projet2, date2, caracteristiques2 [cacher(2)]
________________________________________

<tr>id2_descriptif 1 [ajouter] [supprimer] </tr>
----------------------------------------------
<tr>id2_descriptif 2 [ajouter] [supprimer] </tr>
----------------------------------------------
<tr>id2_descriptif 3 [ajouter] [supprimer] </tr>
________________________________________

Mon code actuel est le suivant :

Javascript :
Code:

1 2 3 4 5 6 7 8 <script language="JavaScript" type="text/JavaScript"> function deroul(id_descriptif) { if(document.getElementById(id_descriptif).className=='aff_tr') {document.getElementById(id_descriptif).className='cache_tr'} else if(document.getElementById(id_descriptif).className=='cache_tr') {document.getElementById(id_descriptif).className='aff_div'} } </script>
CSS :
Code:

1 2 3 4 5 6 7 8 9 10 <style type="text/css">  </style>
Dans une boucle PHP où on affiche tout les projets existant se trouve un bouton :

Code:

<img src="deroule.gif" onclick="deroul('descriptif')" />

Dans une boucle où s'affiche tout les descriptifs d'un projet se trouve des lignes dynamiques issues du modèle :

Code:

<tr class="cache_div" id="descriptif" > idx_descriptifx </tr>

Mon code n'affiche que le premier descriptif du premier projet lorsque je clique sur n'importe qu'elle bouton "Afficher".

Comment afficher / cacher, en cliquant sur le bouton "Afficher /Cacher" d'un certain projet, seulement toutes ses lignes descriptifs ?

Merci d'avance.

01/12/2009, 17h22
E.Bzz

Bonjour,
il faudrait qu'on voit le code généré de ta table (au moins une partie si elle est grande).
Entre autre, j'ai un gros doute sur la gestion des id :?

A+

Bonjour,

Une petite manière simple de faire ce que tu recherche :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<html>
<head>
<script type='text/javascript'>
function showProject(project_id) {
    var projects = document.getElementById('projects');
    if( ! projects)  return false;
 
    var descriptifs = document.getElementsByClassName('descriptif');
    if(( ! descriptifs) || (descriptifs.length === 0))  return false;
 
    for(var i = 0, dlen = descriptifs.length; i < dlen; i++) {
        var descID = descriptifs[i].id || 'undef';
 
        if(descID.indexOf(project_id + '_') === 0) {
            toggle(descID);
        }
    }
    return true;
}
 
function toggle(elementID) {
    var element = document.getElementById(elementID);
    if( ! element) return false;
 
    return element.style.display = (element.style.display === 'none') ? '' : 'none';
}
 
</script>
</head>
<body>
<table id='projects' border='1'>
<tr id='p1'>
    <td>Projet 1</td>
    <td>01/12/2009</td>
    <td><input id="btn_p1" type="button" value="Show project" onclick="showProject('p1');" /></td>
</tr>
<tr id='p1_d1' class='descriptif'>
    <td>Descriptif 1</td>
    <td>Cle</td>
    <td>Valeur</td>
</tr>
<tr id='p1_d2' class='descriptif'>
    <td>Descriptif 2</td>
    <td>Cle</td>
    <td>Valeur</td>
</tr>
<tr id='p2'>
    <td>Projet 2</td>
    <td>01/12/2009</td>
    <td><input id="btn_p2" type="button" value="Show project" onclick="showProject('p2');" /></td>
</tr>
<tr id='p2_d1' class='descriptif'>
    <td>Descriptif 1</td>
    <td>Cle</td>
    <td>Valeur</td>
</tr>
<tr id='p2_d2' class='descriptif'>
    <td>Descriptif 2</td>
    <td>Cle</td>
    <td>Valeur</td>
</tr>
</table>
</body>
</html>

cependant, comme l'a dit E.Bzz, la gestion des id est limite :?

Bonjour Arnaud F,

A vrai dire, je n'arrive pas à adapter ton code avec PHP, voici la forme du code avant d'être executé :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<table id="projects" >
 
<?php
 
while ($echo_selection = mysql_fetch_array($result_selection)) 
{
 
?>
 
  <tr id='p<?php echo $echo_selection['id_projet']; ?>'> 
  <td>Projet <?php echo $echo_selection['id_projet']; ?></td>
  <td><?php echo $echo_selection['date_projet']; ?></td>
  <td><img src="deroule.gif" onclick="showProject(???);" /></td>
  </tr>
 
<?php 
 
if (mysql_num_rows($result_selection) != 0)
{
	$requete_descriptif = "SELECT * FROM principal, descriptifs WHERE principal.id = descriptifs.id_projet AND id_projet = '".$echo_selection['id']."'";
	$result_descriptif = mysql_query($requete_descriptif);
 
	$incremente = 0;
 
	while ($echo_descriptif = mysql_fetch_array($result_descriptif))
	{
 
	$incremente ++;
?>
	<tr class="descriptif" id="p<?php echo $echo_descriptif['id_projet'] . '_d' . $incremente; ?>" >
	<td>Descriptif <?php echo $incremente; ?></td>
	</tr>
 
  <?php } } }?>
 
</table>

02/12/2009, 17h22
E.Bzz

Merci de poster le code généré et non le code PHP ...

A+

J'avoue qu'il faut s'en sortir en développant de la sorte ... On voit mal ou les conditions / boucles commencent et se terminent...

Étant dans un bon jour, je décortique :
Code:

1 2 3 4 5 6 while ($echo_selection = mysql_fetch_array($result_selection)) { if (mysql_num_rows($result_selection) != 0) { } }
Ceci n'est déjà pas correct, ou du moins, ne fais pas ce que vous voulez.
En effet, la valeur de mysql_num_rows($result_selection) retourne le nombre de projets retournés par la requête, et pas le nombre de descriptifs qu'il contient !

Par conséquent, si mysql_num_rows($result_selection) vaut 0, on ne rentrera jamais dans votre boucle et se test sera donc caduque (jamais atteint)!
S'il y a des projets retournés (et donc mysql_num_rows($result_selection)) est supérieur à 0, cela revient à coder:

Code:

if(1 != 0)

qui sera toujours vraie si on rentre dans le code.

Ensuite, plutôt que de faire :
Code:

1 2 3 4 5 <table> <tr> <td><?php echo $project; ?></td> </tr> </table>
Je préfère des choses plus lisibles du genre :
Code:

1 2 3 4 5 6 7 echo " <table> <tr> <td>" . $project . "</td> </tr> </table> ";
Votre code devrait plus ressembler à :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 <table id="projects" > <?php while ($project = mysql_fetch_array($result_selection)) { $projectID = $project['id_projet']; echo " <tr id='" . $projectID . "'> <td>Projet " . $projectID . "</td> <td>" . $project['date_projet'] ."</td> <td><img src='deroule.gif' onclick='showProject('p" . $projectID . "');' /></td> </tr> "; if (1 != 0) // La condition que vous souhaitez ! { $requete_descriptif = "SELECT * FROM principal, descriptifs WHERE principal.id = descriptifs.id_projet AND id_projet = '".$projectID."'"; $result_descriptif = mysql_query($requete_descriptif); $incremente = 0; while ($descriptif = mysql_fetch_array($result_descriptif)) { $incremente++; // Exemple d'ID généré : p_1d_1 echo " <tr class='descriptif' id='p" . $rpojectID . "_d" . $incremente . " > <td>Descriptif " . $incremente "</td> </tr> "; } } } ?> </table>
Attention, j'ai apporté des améliorations et répondu a des questions en même temps dans le nouveau code, soyez donc vigilant ;)

De plus, j'ai pu constaté que pour votre ligne "projet vous faite une ligne avec 3 cellules, dans le cas d'un descriptif, qu'une seule... Or des données tabulaires (en tableau) se doivent de toujours avoir le même nombre de cellules (à moins d'en préciser le nombre de cellules à fusionner entre elles (colspan)).

Ceci dit, je rejoins E.Bzz, ce qui nous intéresse est de savoir le code javascript généré et non la manière de le générer ;)

++