Affichage/masquage Tableau

**Sophiaduweb** · 08/06/2016, 09h29

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

Voici le code en question :

Les cotes CODE cassent mon code , j'ai upload mon code sur mon google drive, voici le lien : https://drive.google.com/open?id=0B_...jFFd1M5d2FKSGc

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
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&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>
************<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>
************<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>

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

Nom : 1.png
Affichages : 130
Taille : 10,7 Ko

Nom : 1.png
Affichages : 130
Taille : 10,7 Ko

Dans l'idéal quand nous cliquons sur <tr></tr> nous avons l'affichage suivant :

Nom : 2.png
Affichages : 119
Taille : 23,3 Ko

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

Nom : 3.png
Affichages : 119
Taille : 19,4 Ko

Nom : 3.png
Affichages : 119
Taille : 19,4 Ko

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 :

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

**chadoum** · 08/06/2016, 09h46

Tu peux ajouter une classe aux tr que tu souhaites "clickables", par exemple :

Code :

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

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

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

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

**Sophiaduweb** · 08/06/2016, 10h51

Bonjour chadoum,

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

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?

Encore merci , et merci d'avance

**chadoum** · 08/06/2016, 11h08

Si tu enlèves la ligne 22 :

Code :

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

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

**Sophiaduweb** · 08/06/2016, 11h38

Code :

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

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 Nom : 6.png
Affichages : 116
Taille : 34,0 Ko

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 :

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

**chadoum** · 08/06/2016, 12h19

Ah dsl !

Code :

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

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");
});

**Sophiaduweb** · 08/06/2016, 16h48

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

**chadoum** · 08/06/2016, 16h57

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

Code :

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

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 ?

**Sophiaduweb** · 08/06/2016, 17h06

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

Code :

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

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>

et

Code :

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

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 :

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

Nom : 9.png
Affichages : 109
Taille : 34,1 Ko

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

**chadoum** · 08/06/2016, 17h15

Ok c'est normal, place ta balise

Code :

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

<script type="text/javascript">

à la fin, entre la balise </table> et la balise </body> ligne 206 il me semble

**Sophiaduweb** · 08/06/2016, 17h23

Que dire... tu es parfait.

Mille merci, tout fonctionne parfaitement.

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

Bisous !

**chadoum** · 08/06/2016, 17h25

Ok super, tu peux marquer en résolu !

**Sophiaduweb** · 08/06/2016, 17h45

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

Si je veux qu'un seul des éléments soit déplié à la fois, de quelle manière dois-je m'y prendre?

**chadoum** · 10/06/2016, 08h58

Qu'est ce que tu entends par

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

?

**Sophiaduweb** · 13/06/2016, 09h49

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 :
Nom : 11.png
Affichages : 80
Taille : 17,4 Ko

Nom : 11.png
Affichages : 80
Taille : 17,4 Ko

- 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

**chadoum** · 13/06/2016, 10h09

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 :

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

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>

**Sophiaduweb** · 13/06/2016, 10h53

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

Résolu !

**Sophiaduweb** · 28/06/2016, 16h28

Voici le code au complet pour les curieux !

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

Affichage/masquage Tableau

jQuery

Discussions similaires

Partager

Partager