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 : 151
Taille : 10,7 Ko

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

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

Nom : 2.png
Affichages : 139
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 : 139
Taille : 19,4 Ko

Nom : 3.png
Affichages : 139
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 : 134
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");
});

Affichage/masquage Tableau

jQuery

Vue hybride

Discussions similaires

Partager

Partager