Afficher / cacher différentes lignes d'un tableau

**Renzokuken** · 01/12/2009, 16h05

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<style type="text/css">
<!--
.aff_div {
 display:inline;
 }
.cache_div {
 display :none;
 }
-->
</style>

Dans une boucle PHP où on affiche tout les projets existant se trouve un bouton :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<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.

**E.Bzz** · 01/12/2009, 17h22

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+

**Arnaud F.** · 01/12/2009, 19h46

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Renzokuken** · 02/12/2009, 17h14

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**E.Bzz** · 02/12/2009, 17h22

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

A+

**Arnaud F.** · 02/12/2009, 19h26

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 PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

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 PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

if(1 != 0)

qui sera toujours vraie si on rentre dans le code.

Ensuite, plutôt que de faire :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
echo "
<table>
    <tr>
        <td>" . $project . "</td>
    </tr>
</table>
";

Votre code devrait plus ressembler à :

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

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

++

Afficher / cacher différentes lignes d'un tableau

JavaScript

Discussions similaires

Partager

Partager