pb avec display:table-row d'une <tr> sous ie

**bibile** · 12/02/2006, 15h45

Bonjour,

Je fais ca pour modifier le style DISPLAY d'une <tr>:

Code :

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

1
2
var P_tr = document.getElementById("ligne2");
P_tr.style.display = "none";

en HTML j'ai:

Code :

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

<tr id="ligne2" style="display:table-row;">

sous firefox, le js marche tres bien.
sous ie, ca plante et j'ai ca comme erreur:

Impossible d'obtenir la propriete display. Argument non valide.

Si au lieu de "table-row" dans le HTML j'ai "block", et bien alors ca marche sous ie.

Qu'est-ce que je peux faire pour que ca fonctionne sous ie avec le "table-row" ? c'est parce qu'il y a un "-" qu'il plante ?

**Auteur** · 12/02/2006, 17h44

bonjour,

en faisant comme ceci :

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
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
function test()
{
 var P_tr = document.getElementById("ligne2");
P_tr.style.display = "none";
}
//-->
</script>
 
</head>
 
<body>
<table>
  <tr style="display:table-row;">
    <td> ligne 1
    </td>
  </tr>
  <tr id="ligne2" style="display:table-row;">
    <td> ligne 2
    </td>
  </tr>
  <tr style="display:table-row;">
    <td> ligne 3
    </td>
  </tr>
</table>
 
<input type="button" value="Bouton" id="BNom" onclick="test()" >
 
</body>
</html>

je n'ai aucun problème sous IE (v5) et FireFox. A quel moment le "display: none" est-il appelé ?

Si je ne me trompe pas, les styles table-cell, table-column, table-row, ... sont censés s'appliquer sur des balises de type div.

**bibile** · 12/02/2006, 17h53

merci bcp pour ton exemple.
j'avais simplifié le mien en pensant bien faire. mais en fait, le pb ne se pose que dans 1 sens.

j'ai modifié ton exemple (la ligne 2 est caché et je veux l'afficher avec le table-rox).
et bien, ca me donne l'erreur sous ie:

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
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
function test()
{
 var P_tr = document.getElementById("ligne2");
P_tr.style.display = "table-row";
}
//-->
</script>
 
</head>
 
<body>
<table>
  <tr style="display:table-row;">
    <td> ligne 1
    </td>
  </tr>
  <tr id="ligne2" style="display:none;">
    <td> ligne 2
    </td>
  </tr>
  <tr style="display:table-row;">
    <td> ligne 3
    </td>
  </tr>
</table>
 
<input type="button" value="Bouton" id="BNom" onclick="test()" >
 
</body>
</html>

apparement, il y a bien un bug ie

a la place de table-row, je peux utiliser display=block, mais ca me pose un autre probleme, sous firefox cette fois

**Auteur** · 12/02/2006, 18h11

en effet.

En toute franchise, jouer à afficher ou à cacher des lignes d'un tableau en utilisant la propriété display n'est pas recommandé.

voici un exemple qui permet d'ajouter un ligne à ton tableau :
http://javascript.developpez.com/faq/?page=Table

**bibile** · 12/02/2006, 19h45

merci pour les insertRow et deleteRow. je ne connaissais pas !
au pire, je ferai avec ca.

ca va quand meme sensiblement rallonger mon code parce que les lignes de ma table etaient assez chargées

y a pas de 2ieme methode pour cacher/decacher des <tr> ?

**Auteur** · 13/02/2006, 10h37

Après quelques recherches j'ai trouvé cet exemple :

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
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
function CacheLigne()
{
 var eTab = document.getElementById("tab")
 eTab.rows[1].style.display="none";
}
function MontreLigne()
{
 var eTab = document.getElementById("tab")
 eTab.rows[1].style.display="";
}
//-->
</script>
 
</head>
 
<body>
<table id="tab">
  <tr>
    <td>ligne 1
    </td>
  </tr>
  <tr>
    <td>ligne 2
    </td>
  </tr>
  <tr>
    <td>ligne 3
    </td>
  </tr>
</table>
<input type="button" value="Cache" id="BNom" onclick="CacheLigne()">
<input type="button" value="Montre" id="BNom" onclick="MontreLigne()">
 
</body>
 
</html>

ça n'a pas l'air de poser de problème sous IE et FF.