masquage de ligne d'un tableau

**tentos** · 11/07/2008, 10h12

Bonjour, j'ai un problème de compatibilité de code entre Ie et firefox

En fait sur Ie cela fonctionne très bien mais sur firefox mon tableau est disposé n'importe comment. quelqu'un aurait une solution à mon problème

Voici mon code

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
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
 
<html>
<head>
<style>
th {
        font-size: 11px; 
        font-family: Arial; 
        font-weight: bold; 
        line-height: 15px; 
        text-align: center;
        background-color: #826E59;
        color: white;
}
th.vertical{width:10em;text-align:right}
</style>
<script>
function getradioChecked(){
rType = document.getElementsByName("Type");
for(var i = 0; i <= rType.length; i++){
if(rType[i].checked) return rType[i].value;
}
}
function hideShow(){
if(getradioChecked() =='1'){
document.getElementById('1').style.display = 'block';
document.getElementById('2').style.display = 'none';
document.getElementById('3').style.display = 'none';
}else if(getradioChecked() =='2'){
document.getElementById('1').style.display = 'none';
document.getElementById('2').style.display = 'block';
document.getElementById('3').style.display = 'none';
}else if(getradioChecked() =='3'){
document.getElementById('1').style.display = 'none';
document.getElementById('2').style.display = 'none';
document.getElementById('3').style.display = 'block';
}
}
</script>
</head>
<body>
 
<table width="100%" border="1">
<tr>
<th colspan="2">Titre</th>
</tr>
<tr id="Type">
<th class="vertical">Titre type</th>
<td>
<input type="radio" onclick="hideShow()" name="Type" value="1"/>val1
<input type="radio" onclick="hideShow()" name="Type" value="2"/>val2
<input type="radio" onclick="hideShow()" name="Type" value="3"/>val3
</td>
</tr>
<tr id="1">
<th class="vertical">Type1 Titre</th>
<td>
<select name="dayScheduled">
<option value="MON">Lundi</option>
<option value="TUE">Mardi</option>
</select>
</td>
</tr>
<tr id="2">
<th class="vertical">Type1 Titre</th>
<td>
<input type="radio" name="dayScheduled" value="JAN">Janvier
<input type="radio" name="dayScheduled" value="FEB">Février
</td>
</tr>
<tr id="3">
<th class="vertical">Type1 Titre</th>
<td>
<select name="dayScheduled">
<option value="2008">2008</option>
<option value="2009">2009</option>
</select>
</td>
</tr>
</table>
</body>
</html>

**Bisûnûrs** · 11/07/2008, 10h17

Il ne faut pas que tu mettes 'block' dans ce genre de ligne :

Code :

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

document.getElementById('2').style.display = 'block';

mais '' :

Code :

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

document.getElementById('2').style.display = '';

**tentos** · 11/07/2008, 10h23

Ok ça marche merci.

**SpaceFrog** · 11/07/2008, 10h27

c'est pas inlineblock ou un truc spécifique aux tables ?

ha retrouvé :

Code :

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

1
2
3
4
 
tr {
	display: inline-block;
}

**Bisûnûrs** · 11/07/2008, 10h34

@SpaceFrog : IE ne connait malheureusement pas cette valeur de display, un tr est pour lui un élément block, alors que pour Firefox c'est de type inline-block (ou autre non reconnu par IE). C'est pour ça que son code fonctionnait sur IE.

Mettre la valeur de display à vide remet le style par défaut sur chacun des navigateurs, donc à block sur IE et à un autre sur Firefox.