Afficher et masquer des lignes de tableau avec IE8 [Résolu]

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

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 :

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

[Bovino]

Code :

$('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]

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