Afficher et masquer des lignes de tableau avec IE8

Version imprimable

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:

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;"> - </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>

24/08/2011, 12h39
Bovino

Citation:

Cela fonctionne

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

:oops: effectivement ... Désolé

Voici le script JQuery

Code:

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:

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

24/08/2011, 13h01
Bovino

Code:

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

Ce type de sélecteur n'existe pas :koi:
Il sert à quoi le @ ?
24/08/2011, 13h05
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 ?
24/08/2011, 14h23
horkets

Je m'y suis pris autrement. Ca fonctionne.
Merci pour la rapidité de réaction!
H
24/08/2011, 15h25
Bovino

Citation:

Envoyé par 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.

Pour être précis, le sélecteur

Code:

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

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