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

Vue hybride

Discussions similaires

Partager

Partager