Affichage/masquage Tableau

Version imprimable

3 pièce(s) jointe(s)

Bonjour tous le monde ! Pour commencer, sachez que je suis débutante en programmation. ;)

Je suis en stage et je cherche à développer un petit bout de programme , mais je bloque :roll:

Voici le code en question :

Les cotes CODE cassent mon code :calim2: , j'ai upload mon code sur mon google drive, voici le lien : https://drive.google.com/open?id=0B_...jFFd1M5d2FKSGc
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 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> ****<style type="text/css"> ********body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.8em;} ********#report { border-collapse:collapse;} ********#report h4 { margin:0px; padding:0px;} ********#report img { float:right;} ********#report ul { margin:10px 0 10px 40px; padding:0px;} ********#report th { background:#7CB8E2 url(header_bkg.png) repeat-x scroll center left; color:#fff; padding:7px 15px; text-align:left;} ********#report td { background:#C7DDEE none repeat-x scroll center left; color:#000; padding:7px 15px; } ********#report tr.odd td { background:#fff url(row_bkg.png) repeat-x scroll center left; cursor:pointer; } ********#report div.arrow { background:transparent url(arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;} ********#report div.up { background-position:0px 0px;} ****</style> ****<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> ****<script type="text/javascript">* ********$(document).ready(function(){ ************$("#report tr:odd").addClass("odd"); ************$("#report tr:not(.odd)").hide(); ************$("#report tr:first-child").show(); ************* ************$("#report tr.odd").click(function(){ ****************$(this).next("tr").toggle(); ****************$(this).find(".arrow").toggleClass("up"); ************}); ************//$("#report").jExpand(); ********}); ****</script>******* </head> <body> ****<table id="report" width='1400px'> ********<tr> ************<th>Prenom</th> ************<th>Nom</th> ************<th>Tel. Domicile</th> ************<th>Tel. Portable</th> ************<th></th> ********</tr> ********<tr> ************<td>Sophie</td> ************<td>Hermez</td> ************<td>01 90 57 89 36</td> ************<td>06 46 85 96 13</td> ************<td><div class="arrow"></div></td> ********</tr> ********<tr> ************<td colspan="5"> ****************<table width="100%" border="0" cellspacing="2" cellpadding="5"> ********************<tr> ************************<td width="15%" bgcolor="#E4E4E4">Nom</td>* ************************<td width="20%" align="left" colspan="2" bgcolor="#FFFFFF"> ****************************<select name="Civilite" size="1" disabled> ********************************<option value=''>Mlle.</option> ****************************</select> ****************************<input name="Nom" type="text" size="30" maxlength="30" value="Hermez" disabled> ************************</td> ************************<td width="15%" bgcolor="#E4E4E4">Prénom</td> ************************<td width="20%" align="left" colspan="2" bgcolor="#FFFFFF"><input name="Prenom" type="text" size="35" maxlength="35" value="Sophie" disabled></td> ********************</tr> ********************<tr> ************************<td width="12%" bgcolor="#E4E4E4">Date naiss.</td> ************************<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Dnaiss" type="text" size="15" value="01/07/1992" disabled></td> ********************</tr>* ********************<tr> ************************<td width="12%" bgcolor="#E4E4E4">Ville de naissance.</td> ************************<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Vnaiss" type="text" size="15" value="Paris" disabled></td> ********************</tr> ********************<tr> ************************<td width="12%" bgcolor="#E4E4E4">Animal préféré</td> ************************<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Apref" type="text" size="15" value="Le chat" disabled></td> ********************</tr> ****************</table> ************</td> ********</tr> ********<tr> ************<td>Thomas</td> ************<td>Lafod</td> ************<td>01 87 16 39 88</td> ************<td>06 04 98 53 22</td> ************<td><div class="arrow"></div></td> ********</tr> ********<tr> ************<td colspan="5"> ****************<table width="100%" border="0" cellspacing="2" cellpadding="5"> ********************<tr> ************************<td width="15%" bgcolor="#E4E4E4">Nom</td>* ************************<td width="20%" align="left" colspan="2" bgcolor="#FFFFFF"> ****************************<select name="Civilite" size="1" disabled> ********************************<option value=''>Mr.</option> ****************************</select> ****************************<input name="Nom" type="text" size="30" maxlength="30" value="Lafod" disabled> ************************</td> ************************<td width="15%" bgcolor="#E4E4E4">Prénom</td> ************************<td width="20%" align="left" colspan="2" bgcolor="#FFFFFF"><input name="Prenom" type="text" size="35" maxlength="35" value="Thomas" disabled></td> ********************</tr> ********************<tr> ************************<td width="12%" bgcolor="#E4E4E4">Date naiss.</td> ************************<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Dnaiss" type="text" size="15" value="26/01/1992" disabled></td> ********************</tr>* ********************<tr> ************************<td width="12%" bgcolor="#E4E4E4">Ville de naissance.</td> ************************<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Vnaiss" type="text" size="15" value="Paris" disabled></td> ********************</tr> ********************<tr> ************************<td width="12%" bgcolor="#E4E4E4">Animal préféré</td> ************************<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Apref" type="text" size="15" value="Le lion" disabled></td> ********************</tr> ****************</table> ************</td> ********</tr> ********<tr> ************<td>Melodie</td> ************<td>Numelo</td> ************<td>01 26 79 85 33</td> ************<td>06 01 36 88 97</td> ************<td><div class="arrow"></div></td> ********</tr> ********<tr> ************<td colspan="5"> ****************<table width="100%" border="0" cellspacing="2" cellpadding="5"> ********************<tr> ************************<td width="15%" bgcolor="#E4E4E4">Nom</td>* ************************<td width="20%" align="left" colspan="2" bgcolor="#FFFFFF"> ****************************<select name="Civilite" size="1" disabled> ********************************<option value=''>Mlle.</option> ****************************</select> ****************************<input name="Nom" type="text" size="30" maxlength="30" value="Numelo" disabled> ************************</td> ************************<td width="15%" bgcolor="#E4E4E4">Prénom</td> ************************<td width="20%" align="left" colspan="2" bgcolor="#FFFFFF"><input name="Prenom" type="text" size="35" maxlength="35" value="Melodie" disabled></td> ********************</tr> ********************<tr> ************************<td width="12%" bgcolor="#E4E4E4">Date naiss.</td> ************************<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Dnaiss" type="text" size="15" value="21/07/1989" disabled></td> ********************</tr>* ********************<tr> ************************<td width="12%" bgcolor="#E4E4E4">Ville de naissance.</td> ************************<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Vnaiss" type="text" size="15" value="Paris" disabled></td> ********************</tr> ********************<tr> ************************<td width="12%" bgcolor="#E4E4E4">Animal préféré</td> ************************<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Apref" type="text" size="15" value="Le chien" disabled></td> ********************</tr> ****************</table> ************</td> ********</tr> ****</table> </body> </html>
Que permet de faire ce code ?

Eh bien , il est sensé afficher trois lignes cliquables. Qui, chacune d'entre elles, lorsqu'elle sont cliquées, déploient un volet.

Pour faire ce code je me suis aidée du site suivant :

http://www.jankoatwarpspeed.com/expa...expand-plugin/

http://www.jankoatwarpspeed.com/wp-c...pandable-rows/

Mais ma chère sophie, quel est le problème alors ?!

Eh bien, en inspectant de plus prêt le code , nous nous rendons comptes que le javascript ligne 17 vérifie si les "tr" sont paires/impaires pour savoir s'ils doivent être dépliés ou non.

Voilà à quoi ressemble le tableau en question

Pièce jointe 212089
Dans l'idéal quand nous cliquons sur <tr></tr> nous avons l'affichage suivant :

Pièce jointe 212090

Hors quand on clique, certains éléments sont cachés , ils faut obligatoirement leurs cliquer dessus pour qu'ils s'affichent

Pièce jointe 212091

Oui, nous nous rendons compte que tous les tr sont cliquables quasiments (La faute au systeme de paire/ impaire). Hors je voudrais que seuls les TR principaux soit cliquables. (Un systeme d'ID ?). Mais ne maitrisant absolument pas la technologie , je ne sais pas quels modifications apporter. S'il vous plait, pouvez vous m'aider ? (merci d'avance).

Illustrons mon problème :

1) La façon dont j'aimerai que ça marche : :calim2:

Un tableau se présente sous la forme suivante :

---------------- Prenom ------------ Nom ------------ Tel Domicile ------------ Tel Portable ------------

-(Cliquable 1) -- Sophie ----------- Hermes -------- 01 15 78 96 44 ------- 06 87 95 66 51 ----

-(Le clic 1 va déplier cette ligne) - Nom

-(Le clic 1 va déplier cette ligne) - Prénom

-(Le clic 1 va déplier cette ligne) - Ville naissance

-(Le clic 1 va déplier cette ligne) - Animal préféré

-(Cliquable 2) -- Thomas ----------- Durant -------- 01 18 74 96 78 ------- 06 21 97 85 31 ------

-(Le clic 2 va déplier cette ligne) - Nom

-(Le clic 2 va déplier cette ligne) - Prénom

-(Le clic 2 va déplier cette ligne) - Ville naissance

-(Le clic 2 va déplier cette ligne) - Animal préféré

2) La façon dont ça marche actuellement (Et qui n'est donc pas bonne)

---------------- Prenom ------------ Nom ------------ Tel Domicile ------------ Tel Portable ------------

-(Cliquable 1) -- Sophie ----------- Hermes -------- 01 15 78 96 44 ------- 06 87 95 66 51 ----

-(Le clic 1 va déplier cette ligne) - Nom

-(Cliquable) (Le clic 1 va déplier cette ligne) - Prénom

-(Le clic 1 va déplier cette ligne) - Ville naissance

-(Cliquable) (Le clic 1 va déplier cette ligne) - Animal préféré

-(Cliquable 2) -- Thomas ----------- Durant -------- 01 18 74 96 78 ------- 06 21 97 85 31 ------

-(Le clic 2 va déplier cette ligne) - Nom

-(Cliquable) (Le clic 2 va déplier cette ligne) - Prénom

-(Le clic 2 va déplier cette ligne) - Ville naissance

-(Cliquable) (Le clic 2 va déplier cette ligne) - Animal préféré

...

Oui, nous nous rendons compte que tous les tr sont cliquables quasiments (La faute au systeme de paire/ impaire). Hors je voudrais que seuls les TR principaux soit cliquables. (Un systeme d'ID ?). Mais ne maitrisant absolument pas la technologie , je ne sais pas quels modifications apporter. S'il vous plait, pouvez vous m'aider ? (merci d'avance). :oops:

08/06/2016, 09h46
chadoum
Tu peux ajouter une classe aux tr que tu souhaites "clickables", par exemple :

Code:

<tr class="collapsible">

Une classe plutôt qu'un id car l'évènement concerne plusieurs éléments.

Et du coup il faudra modifier l'évènenement javascript :
Code:

1 2 3 4 5 $(".collapsible").click(function(){ $(this).next("tr").toggle(); $(this).find(".arrow").toggleClass("up"); });
08/06/2016, 10h51
Sophiaduweb

Bonjour chadoum,

Merci beaucoup ! En effet ça a l'air d'être beaucoup mieux :P

Je vois que par défaut les " tr cliquables " sont déployés. Quel option faut il changer pour que les tr soit par défaut en mode réduit? :oops:

Encore merci , et merci d'avance :P
08/06/2016, 11h08
chadoum

Si tu enlèves la ligne 22 :

Code:

$("#report tr:first-child").show();

1 pièce(s) jointe(s)

Code:

1
2
3
4
5
6
7
8
9
 
<script type="text/javascript">  
	$(document).ready(function(){
		$(".collapsible").click(function(){
		$(this).next("tr").toggle();
		$(this).find(".arrow").toggleClass("up");
		});
	});
</script>

Voilà à quoi ressemble mon script maintenant, il n'y a plus la ligne que tu me dis d'enlever :?

Par défaut tout est ouvert Pièce jointe 212119

Pour ceux qui suivraient la discussion et qui auraient le même problème (et qui se demandent "Mais où en est-on, je ne suis plus" ) voilà le code au complet ;) Profitez !

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <style type="text/css">
        body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.8em;}
        #report { border-collapse:collapse;}
        #report img { float:right;}
        #report ul { margin:10px 0 10px 40px; padding:0px;}
        #report th { background:#7CB8E2 url(header_bkg.png) repeat-x scroll center left; color:#fff; padding:7px 15px; text-align:left;}
        #report td { background:#C7DDEE none repeat-x scroll center left; color:#000; padding:7px 15px; }
        #report tr.collapsible td { background:#fff url(row_bkg.png) repeat-x scroll center left; cursor:pointer; }
        #report div.arrow { background:transparent url(arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
        #report div.up { background-position:0px 0px;}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">  
        $(document).ready(function(){
			$(".collapsible").click(function(){
			$(this).next("tr").toggle();
			$(this).find(".arrow").toggleClass("up");
			});
        });
    </script>     
</head>
<body>
    <table id="report" width='1400px'>
        <tr>
            <th>Prenom</th>
            <th>Nom</th>
            <th>Tel. Domicile</th>
            <th>Tel. Portable</th>
            <th></th>
        </tr>
        <tr class="collapsible">
            <td>Sophie</td>
            <td>Hermez</td>
            <td>01 90 57 89 36</td>
            <td>06 46 85 96 13</td>
            <td><div class="arrow"></div></td>
        </tr>
        <tr>
            <td colspan="5">
				<table width="100%" border="0" cellspacing="2" cellpadding="5">
					<tr> 
						<td width="15%" bgcolor="#E4E4E4">Nom</td>  
						<td width="20%" align="left" colspan="2" bgcolor="#FFFFFF">
							<select name="Civilite" size="1" disabled>
								<option value=''>Mlle.</option>
							</select>
							<input name="Nom" type="text" size="30" maxlength="30" value="Hermez" disabled>
						</td>
						<td width="15%" bgcolor="#E4E4E4">Pr&eacute;nom</td>
						<td width="20%" align="left" colspan="2" bgcolor="#FFFFFF"><input name="Prenom" type="text" size="35" maxlength="35" value="Sophie" disabled></td>
					</tr>
					<tr>
						<td width="12%" bgcolor="#E4E4E4">Date naiss.</td>
						<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Dnaiss" type="text" size="15" value="01/07/1992" disabled></td>
					</tr>  
					<tr>
						<td width="12%" bgcolor="#E4E4E4">Ville de naissance.</td>
						<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Vnaiss" type="text" size="15" value="Paris" disabled></td>
					</tr> 
					<tr>
						<td width="12%" bgcolor="#E4E4E4">Animal préféré</td>
						<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Apref" type="text" size="15" value="Le chat" disabled></td>
					</tr>
				</table>
            </td>
        </tr>
		<tr class="collapsible">
            <td>Thomas</td>
            <td>Lafod</td>
            <td>01 87 16 39 88</td>
            <td>06 04 98 53 22</td>
            <td><div class="arrow"></div></td>
        </tr>
        <tr>
            <td colspan="5">
				<table width="100%" border="0" cellspacing="2" cellpadding="5">
					<tr> 
						<td width="15%" bgcolor="#E4E4E4">Nom</td>  
						<td width="20%" align="left" colspan="2" bgcolor="#FFFFFF">
							<select name="Civilite" size="1" disabled>
								<option value=''>Mr.</option>
							</select>
							<input name="Nom" type="text" size="30" maxlength="30" value="Lafod" disabled>
						</td>
						<td width="15%" bgcolor="#E4E4E4">Pr&eacute;nom</td>
						<td width="20%" align="left" colspan="2" bgcolor="#FFFFFF"><input name="Prenom" type="text" size="35" maxlength="35" value="Thomas" disabled></td>
					</tr>
					<tr>
						<td width="12%" bgcolor="#E4E4E4">Date naiss.</td>
						<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Dnaiss" type="text" size="15" value="26/01/1992" disabled></td>
					</tr>  
					<tr>
						<td width="12%" bgcolor="#E4E4E4">Ville de naissance.</td>
						<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Vnaiss" type="text" size="15" value="Paris" disabled></td>
					</tr> 
					<tr>
						<td width="12%" bgcolor="#E4E4E4">Animal préféré</td>
						<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Apref" type="text" size="15" value="Le lion" disabled></td>
					</tr>
				</table>
            </td>
        </tr>
 
		<tr class="collapsible">
            <td>Melodie</td>
            <td>Numelo</td>
            <td>01 26 79 85 33</td>
            <td>06 01 36 88 97</td>
            <td><div class="arrow"></div></td>
        </tr>
        <tr>
            <td colspan="5">
				<table width="100%" border="0" cellspacing="2" cellpadding="5">
					<tr> 
						<td width="15%" bgcolor="#E4E4E4">Nom</td>  
						<td width="20%" align="left" colspan="2" bgcolor="#FFFFFF">
							<select name="Civilite" size="1" disabled>
								<option value=''>Mlle.</option>
							</select>
							<input name="Nom" type="text" size="30" maxlength="30" value="Numelo" disabled>
						</td>
						<td width="15%" bgcolor="#E4E4E4">Pr&eacute;nom</td>
						<td width="20%" align="left" colspan="2" bgcolor="#FFFFFF"><input name="Prenom" type="text" size="35" maxlength="35" value="Melodie" disabled></td>
					</tr>
					<tr>
						<td width="12%" bgcolor="#E4E4E4">Date naiss.</td>
						<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Dnaiss" type="text" size="15" value="21/07/1989" disabled></td>
					</tr>  
					<tr>
						<td width="12%" bgcolor="#E4E4E4">Ville de naissance.</td>
						<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Vnaiss" type="text" size="15" value="Paris" disabled></td>
					</tr> 
					<tr>
						<td width="12%" bgcolor="#E4E4E4">Animal préféré</td>
						<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Apref" type="text" size="15" value="Le chien" disabled></td>
					</tr>
				</table>
            </td>
        </tr>
    </table>
</body>
</html>

Ah dsl !

Code:

1
2
3
4
5
6
7
 
$("tr").not(":.collapsible").toggle();
$("tr.head").show();
$(".collapsible").click(function () {
                $(this).next("tr").toggle();
                $(this).find(".arrow").toggleClass("up");
});

08/06/2016, 16h48
Sophiaduweb

Je dois être vraiment mauvaise, mais lorsque j'essai d'apporter les modifications que tu me proposes, ça ne marche pas du tout :weird:

Ah j'ai oublié ça :
Il faut modifier
Code:

1 2 3 4 5 6 7 8 9 <table id="report" width='1400px'> <tr class="head"> <th>Prenom</th> <th>Nom</th> <th>Tel. Domicile</th> <th>Tel. Portable</th> <th></th> </tr>
Pour que la première ligne s'affiche.

Mais qu'est-ce qui ne marche pas exactement ?

1 pièce(s) jointe(s)

Eh bien, je viens d'apporter les modifications suivantes :

Code:

1
2
3
4
5
6
7
8
9
 
    <script type="text/javascript">  
		$("tr").not(":.collapsible").toggle();
		$("tr.head").show();
		$(".collapsible").click(function () {
						$(this).next("tr").toggle();
						$(this).find(".arrow").toggleClass("up");
		});
    </script>

Code:

1
2
3
4
5
6
7
8
 
<tr class="head">
            <th>Prenom</th>
            <th>Nom</th>
            <th>Tel. Domicile</th>
            <th>Tel. Portable</th>
            <th></th>
        </tr>

Ce qui donne le code suivant :

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <style type="text/css">
        body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.8em;}
        #report { border-collapse:collapse;}
        #report img { float:right;}
        #report ul { margin:10px 0 10px 40px; padding:0px;}
        #report th { background:#7CB8E2 url(header_bkg.png) repeat-x scroll center left; color:#fff; padding:7px 15px; text-align:left;}
        #report td { background:#C7DDEE none repeat-x scroll center left; color:#000; padding:7px 15px; }
        #report tr.collapsible td { background:#fff url(row_bkg.png) repeat-x scroll center left; cursor:pointer; }
        #report div.arrow { background:transparent url(arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
        #report div.up { background-position:0px 0px;}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">  
		$("tr").not(":.collapsible").toggle();
		$("tr.head").show();
		$(".collapsible").click(function () {
						$(this).next("tr").toggle();
						$(this).find(".arrow").toggleClass("up");
		});
    </script>
</head>
<body>
    <table id="report" width='1400px'>
        <tr class="head">
            <th>Prenom</th>
            <th>Nom</th>
            <th>Tel. Domicile</th>
            <th>Tel. Portable</th>
            <th></th>
        </tr>
        <tr class="collapsible">
            <td>Sophie</td>
            <td>Hermez</td>
            <td>01 90 57 89 36</td>
            <td>06 46 85 96 13</td>
            <td><div class="arrow"></div></td>
        </tr>
        <tr>
            <td colspan="5">
				<table width="100%" border="0" cellspacing="2" cellpadding="5">
					<tr> 
						<td width="15%" bgcolor="#E4E4E4">Nom</td>  
						<td width="20%" align="left" colspan="2" bgcolor="#FFFFFF">
							<select name="Civilite" size="1" disabled>
								<option value=''>Mlle.</option>
							</select>
							<input name="Nom" type="text" size="30" maxlength="30" value="Hermez" disabled>
						</td>
						<td width="15%" bgcolor="#E4E4E4">Pr&eacute;nom</td>
						<td width="20%" align="left" colspan="2" bgcolor="#FFFFFF"><input name="Prenom" type="text" size="35" maxlength="35" value="Sophie" disabled></td>
					</tr>
					<tr>
						<td width="12%" bgcolor="#E4E4E4">Date naiss.</td>
						<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Dnaiss" type="text" size="15" value="01/07/1992" disabled></td>
					</tr>  
					<tr>
						<td width="12%" bgcolor="#E4E4E4">Ville de naissance.</td>
						<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Vnaiss" type="text" size="15" value="Paris" disabled></td>
					</tr> 
					<tr>
						<td width="12%" bgcolor="#E4E4E4">Animal préféré</td>
						<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Apref" type="text" size="15" value="Le chat" disabled></td>
					</tr>
				</table>
            </td>
        </tr>
		<tr class="collapsible">
            <td>Thomas</td>
            <td>Lafod</td>
            <td>01 87 16 39 88</td>
            <td>06 04 98 53 22</td>
            <td><div class="arrow"></div></td>
        </tr>
        <tr>
            <td colspan="5">
				<table width="100%" border="0" cellspacing="2" cellpadding="5">
					<tr> 
						<td width="15%" bgcolor="#E4E4E4">Nom</td>  
						<td width="20%" align="left" colspan="2" bgcolor="#FFFFFF">
							<select name="Civilite" size="1" disabled>
								<option value=''>Mr.</option>
							</select>
							<input name="Nom" type="text" size="30" maxlength="30" value="Lafod" disabled>
						</td>
						<td width="15%" bgcolor="#E4E4E4">Pr&eacute;nom</td>
						<td width="20%" align="left" colspan="2" bgcolor="#FFFFFF"><input name="Prenom" type="text" size="35" maxlength="35" value="Thomas" disabled></td>
					</tr>
					<tr>
						<td width="12%" bgcolor="#E4E4E4">Date naiss.</td>
						<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Dnaiss" type="text" size="15" value="26/01/1992" disabled></td>
					</tr>  
					<tr>
						<td width="12%" bgcolor="#E4E4E4">Ville de naissance.</td>
						<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Vnaiss" type="text" size="15" value="Paris" disabled></td>
					</tr> 
					<tr>
						<td width="12%" bgcolor="#E4E4E4">Animal préféré</td>
						<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Apref" type="text" size="15" value="Le lion" disabled></td>
					</tr>
				</table>
            </td>
        </tr>
 
		<tr class="collapsible">
            <td>Melodie</td>
            <td>Numelo</td>
            <td>01 26 79 85 33</td>
            <td>06 01 36 88 97</td>
            <td><div class="arrow"></div></td>
        </tr>
        <tr>
            <td colspan="5">
				<table width="100%" border="0" cellspacing="2" cellpadding="5">
					<tr> 
						<td width="15%" bgcolor="#E4E4E4">Nom</td>  
						<td width="20%" align="left" colspan="2" bgcolor="#FFFFFF">
							<select name="Civilite" size="1" disabled>
								<option value=''>Mlle.</option>
							</select>
							<input name="Nom" type="text" size="30" maxlength="30" value="Numelo" disabled>
						</td>
						<td width="15%" bgcolor="#E4E4E4">Pr&eacute;nom</td>
						<td width="20%" align="left" colspan="2" bgcolor="#FFFFFF"><input name="Prenom" type="text" size="35" maxlength="35" value="Melodie" disabled></td>
					</tr>
					<tr>
						<td width="12%" bgcolor="#E4E4E4">Date naiss.</td>
						<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Dnaiss" type="text" size="15" value="21/07/1989" disabled></td>
					</tr>  
					<tr>
						<td width="12%" bgcolor="#E4E4E4">Ville de naissance.</td>
						<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Vnaiss" type="text" size="15" value="Paris" disabled></td>
					</tr> 
					<tr>
						<td width="12%" bgcolor="#E4E4E4">Animal préféré</td>
						<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Apref" type="text" size="15" value="Le chien" disabled></td>
					</tr>
				</table>
            </td>
        </tr>
    </table>
</body>
</html>

Mais hélas ça ne fonctionne pas , voilà le résultat :

Pièce jointe 212188

Les éléments ne sont même plus "Cliquables" :calim2:

08/06/2016, 17h15
chadoum

Ok c'est normal, place ta balise

Code:

<script type="text/javascript">

à la fin, entre la balise </table> et la balise </body> ligne 206 il me semble :D
08/06/2016, 17h23
Sophiaduweb

Que dire... tu es parfait. :oops:

Mille merci, tout fonctionne parfaitement.

J'espère pouvoir un jour de rendre là pareille.

Bisous ! :heart:
08/06/2016, 17h25
chadoum

Ok super, tu peux marquer en résolu !
08/06/2016, 17h45
Sophiaduweb

J'ai peut être une dernière petite question :aie:

Si je veux qu'un seul des éléments soit déplié à la fois, de quelle manière dois-je m'y prendre? :calim2:
10/06/2016, 08h58
chadoum

Qu'est ce que tu entends par

Citation:

Si je veux qu'un seul des éléments soit déplié à la fois

?
13/06/2016, 09h49
Sophiaduweb

1 pièce(s) jointe(s)

Eh bien, ce que j'aimerai :

- Par défaut, quand nous arrivons sur la page, tous les "menus" sont fermés (Nous ne voyons pas le contenu).

- Quand nous sélectionnons un menu il se déplie :
Pièce jointe 212562

- Mais lorsqu'on en déplie un autre, le précédemment ouvert se ferme. De manière à n'avoir qu'un seul menu d'ouvert à la fois :roll:

Il faut juste dire dans la méthode click que tu souhaites que tout se referme puis tu ouvres celle qui t'intéresse :

Code:

1
2
3
4
5
6
7
8
9
10
 
<script type="text/javascript">
        $("tr").not(":.collapsible").toggle();
        $("tr.head").show();
        $(".collapsible").click(function () { 
            $("tr.collapsible").next().hide();
            $(this).next("tr").toggle();
            $(this).find(".arrow").toggleClass("up");
        });
    </script>

13/06/2016, 10h53
Sophiaduweb

C'est parfait, c'est tout ce qu'il me fallait. Merci!
Je ne te dérange plus :zoubi:

Résolu !

Voici le code au complet pour les curieux ! ;)

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <style type="text/css">
        body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.8em;}
        #report { border-collapse:collapse;}
        #report img { float:right;}
        #report ul { margin:10px 0 10px 40px; padding:0px;}
        #report th { background:#7CB8E2 url(header_bkg.png) repeat-x scroll center left; color:#fff; padding:7px 15px; text-align:left;}
        #report td { background:#C7DDEE none repeat-x scroll center left; color:#000; padding:7px 15px; }
        #report tr.collapsible td { background:#fff url(row_bkg.png) repeat-x scroll center left; cursor:pointer; }
        #report div.arrow { background:transparent url(arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
        #report div.up { background-position:0px 0px;}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
 
</head>
<body>
    <table id="report" width='1400px'>
        <tr class="head">
            <th>Prenom</th>
            <th>Nom</th>
            <th>Tel. Domicile</th>
            <th>Tel. Portable</th>
            <th></th>
        </tr>
        <tr class="collapsible">
            <td>Sophie</td>
            <td>Hermez</td>
            <td>01 90 57 89 36</td>
            <td>06 46 85 96 13</td>
            <td><div class="arrow"></div></td>
        </tr>
        <tr>
            <td colspan="5">
				<table width="100%" border="0" cellspacing="2" cellpadding="5">
					<tr> 
						<td width="15%" bgcolor="#E4E4E4">Nom</td>  
						<td width="20%" align="left" colspan="2" bgcolor="#FFFFFF">
							<select name="Civilite" size="1" disabled>
								<option value=''>Mlle.</option>
							</select>
							<input name="Nom" type="text" size="30" maxlength="30" value="Hermez" disabled>
						</td>
						<td width="15%" bgcolor="#E4E4E4">Pr&eacute;nom</td>
						<td width="20%" align="left" colspan="2" bgcolor="#FFFFFF"><input name="Prenom" type="text" size="35" maxlength="35" value="Sophie" disabled></td>
					</tr>
					<tr>
						<td width="12%" bgcolor="#E4E4E4">Date naiss.</td>
						<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Dnaiss" type="text" size="15" value="01/07/1992" disabled></td>
					</tr>  
					<tr>
						<td width="12%" bgcolor="#E4E4E4">Ville de naissance.</td>
						<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Vnaiss" type="text" size="15" value="Paris" disabled></td>
					</tr> 
					<tr>
						<td width="12%" bgcolor="#E4E4E4">Animal préféré</td>
						<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Apref" type="text" size="15" value="Le chat" disabled></td>
					</tr>
				</table>
            </td>
        </tr>
		<tr class="collapsible">
            <td>Thomas</td>
            <td>Lafod</td>
            <td>01 87 16 39 88</td>
            <td>06 04 98 53 22</td>
            <td><div class="arrow"></div></td>
        </tr>
        <tr>
            <td colspan="5">
				<table width="100%" border="0" cellspacing="2" cellpadding="5">
					<tr> 
						<td width="15%" bgcolor="#E4E4E4">Nom</td>  
						<td width="20%" align="left" colspan="2" bgcolor="#FFFFFF">
							<select name="Civilite" size="1" disabled>
								<option value=''>Mr.</option>
							</select>
							<input name="Nom" type="text" size="30" maxlength="30" value="Lafod" disabled>
						</td>
						<td width="15%" bgcolor="#E4E4E4">Pr&eacute;nom</td>
						<td width="20%" align="left" colspan="2" bgcolor="#FFFFFF"><input name="Prenom" type="text" size="35" maxlength="35" value="Thomas" disabled></td>
					</tr>
					<tr>
						<td width="12%" bgcolor="#E4E4E4">Date naiss.</td>
						<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Dnaiss" type="text" size="15" value="26/01/1992" disabled></td>
					</tr>  
					<tr>
						<td width="12%" bgcolor="#E4E4E4">Ville de naissance.</td>
						<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Vnaiss" type="text" size="15" value="Paris" disabled></td>
					</tr> 
					<tr>
						<td width="12%" bgcolor="#E4E4E4">Animal préféré</td>
						<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Apref" type="text" size="15" value="Le lion" disabled></td>
					</tr>
				</table>
            </td>
        </tr>
 
		<tr class="collapsible">
            <td>Melodie</td>
            <td>Numelo</td>
            <td>01 26 79 85 33</td>
            <td>06 01 36 88 97</td>
            <td><div class="arrow"></div></td>
        </tr>
        <tr>
            <td colspan="5">
				<table width="100%" border="0" cellspacing="2" cellpadding="5">
					<tr> 
						<td width="15%" bgcolor="#E4E4E4">Nom</td>  
						<td width="20%" align="left" colspan="2" bgcolor="#FFFFFF">
							<select name="Civilite" size="1" disabled>
								<option value=''>Mlle.</option>
							</select>
							<input name="Nom" type="text" size="30" maxlength="30" value="Numelo" disabled>
						</td>
						<td width="15%" bgcolor="#E4E4E4">Pr&eacute;nom</td>
						<td width="20%" align="left" colspan="2" bgcolor="#FFFFFF"><input name="Prenom" type="text" size="35" maxlength="35" value="Melodie" disabled></td>
					</tr>
					<tr>
						<td width="12%" bgcolor="#E4E4E4">Date naiss.</td>
						<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Dnaiss" type="text" size="15" value="21/07/1989" disabled></td>
					</tr>  
					<tr>
						<td width="12%" bgcolor="#E4E4E4">Ville de naissance.</td>
						<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Vnaiss" type="text" size="15" value="Paris" disabled></td>
					</tr> 
					<tr>
						<td width="12%" bgcolor="#E4E4E4">Animal préféré</td>
						<td width="10%" colspan="5" align="left" bgcolor="#FFFFFF"><input name="Apref" type="text" size="15" value="Le chien" disabled></td>
					</tr>
				</table>
				<script type="text/javascript">
					$("tr").not(":.collapsible").toggle();
					$("tr.head").show();
					$(".collapsible").click(function () { 
						$("tr.collapsible").next().hide();
						$(this).next("tr").toggle();
						$(this).find(".arrow").toggleClass("up");
					});
				</script>
            </td>
        </tr>
    </table>
</body>
</html>