3 pièce(s) jointe(s)
Affichage/masquage Tableau
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: