Discussion :

[horkets]

Bonjour à tous,

Est ce que quelqu'un pourrait m'expliquer ce qui ne vas pas avec le code ci-dessous ?

J'utilise Drupal6, pour afficher le programme d'un evenement.
Le programme est constitué de plusieurs lignes.

Pour afficher le programme complet, j'utilise un module Drupal me permettant de faire des listes de lignes.

Ces lignes sont placée dans un tableau.

Chaque ligne de ce tableau est "classée" de façon à ce que je puisse utiliser JQuery pour masquer/afficher chaque ligne de tableau lorsqu'on clique dessus en fonction de la classe ...

Cela fonctionne dans Opéra, Chrome, Firefox, Safari, mais malheureusement pas dans IE7 et IE8.

Que n'aurais je pas compris ?

Merci d'avance pour votre aide

H

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
 
<tr id="row<?php print $data->node_vid ?>" class="parent" style="cursor: pointer;" title="Click to expand/collapse">
 <td style="vertical-align:top;">
  <div style="padding-top:5px;">
   <?php print $data->node_data_field_event_ref_field_h_debut_value; ?>
  </div>
 </td>
<td style="vertical-align:top;padding-top:4px;">&nbsp;-&nbsp;</td>
 <td valign="top">
  <div style="padding-top:5px;">
   <?php print $data->node_data_field_event_ref_field_h_fin_value; ?>
  </div>
 </td>
 <td style="vertical-align:top;">
  <div style="padding-top:5px;">
   <?php print $data->node_title; ?>
  </div>
 </td>
 <td><b>+</b></td>
</tr>
 
<tr class="child-row<?php print $data->node_vid ?>" style="display: none;">
 <td valign="top" colspan="4">
  <div style="width:500px;">
   <?php print $data->node_revisions_body; ?>
  </div>
 </td>
</tr>

[Bovino]

Cela fonctionne

Cela quoi ? Il n'y a pas une ligne de jQuery dans ce que tu montres
Et il est aussi demandé de poster le code HTML généré, pas le PHP qui n'est d'aucune utilité pour JavaScript...

[horkets]

effectivement ... Désolé

Voici le script JQuery

Code :

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

1
2
3
4
5
6
7
8
9
 
<script>
$(function() {
   $('tr.parent').css("cursor","pointer").attr("title","Click to expand/collapse").click(function(){
   $(this).siblings('.child-'+this.id).toggle();
 });
 $('tr[@class^=child-]').hide().children('td');
});
</script>

Et le code html généré:

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
 
<h3>Programme</h3>
<div class="view-content">
<div class="views-row views-row-2 views-row-even views-row-last">
<table style="width:533px;border: 0 none; display:block;">
<colgroup>
<col style="width: 40px;">
<col style="width: 5px;vertical-align:top; top:3px;">
<col style="width: 50px;">
<col style="width: 445px;">
</colgroup>
<tbody>
<tr id="row29" class="parent" title="Click to expand/collapse" style="cursor: pointer;">
<td style="vertical-align:top;">
<div style="padding-top:5px;"> 9:00 </div>
</td>
<td style="vertical-align:top;padding-top:4px;">&nbsp;-&nbsp;</td>
<td valign="top">
<div style="padding-top:5px;"> 9:30 </div>
</td>
<td style="vertical-align:top;">
<div style="padding-top:5px;"> Introduction </div>
</td>
<td>
<b>+</b>
</td>
</tr>
<tr class="child-row29" style="display: none;">
<td valign="top" colspan="4">
<div style="width:500px;">
Introduction
<br>
Orateur: Monsieur X
<br>
Des nos jours, il est important de concevoir les éléments d'un ...
<br>
<br>
</div>
</td>
</tr>
<tr id="row34" class="parent" title="Click to expand/collapse" style="cursor: pointer;">
<td style="vertical-align:top;">
<td style="vertical-align:top;padding-top:4px;">&nbsp;-&nbsp;</td>
<td valign="top">
<td style="vertical-align:top;">
<td>
</tr>
<tr class="child-row34" style="display: none;">
</tbody>
</table>

Est ce que cela est suffisant ?

Merci

[Bovino]

Code :

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

$('tr[@class^=child-]')

Ce type de sélecteur n'existe pas
Il sert à quoi le @ ?

[horkets]

Si mes souvenirs sont bons, c'est une expression régulière qui me permet de trouver l'élément class dans le code.

Ceci dit, si j'enleve le @, cela ne change rien ... ?

Je pense que je vais changer le principe.

Pour l'instant, un user décide quelle ligne du programme il veut afficher, ce qui n'est en fait pas pratique pour ceux qui veulent avoir un aperçu général, car ils devront cliquer sur chaque ligne du tableau pour tou lire.

Je devrais donc placer ce tableau dans un div et faire en sorte que ce soit ce div qui s' "expand" ou se "collapse" en une fois.

Dès lors, est ce que je dois faire quelque chose de particulier concernant IE7 et IE8 ?

[horkets]

Je m'y suis pris autrement. Ca fonctionne.
Merci pour la rapidité de réaction!
H

[Bovino]

Si mes souvenirs sont bons, c'est une expression régulière qui me permet de trouver l'élément class dans le code.

Pour être précis, le sélecteur

Code :

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

$('tr[class^=child-]')

est bien correct, c'est juste à l'@ que je faisais allusion