Remplacer une ligne de tableau par une autre

Version imprimable

Bonjour,

Je cherche à afficher/masquer des lignes de tableau HTML. En fait à remplacer une ligne affichée par une autre. Mon code est le suivant :

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script>
function cache(idElement) {
	document.getElementById(idElement).style.display = "none";
	document.getElementById(idElement).style.visibility="hidden";
}
 
function affiche(idElement) {
	document.getElementById(idElement).style.display = "block";
	document.getElementById(idElement).style.visibility="visible";
}
</script>
<body>
<table border="1">
<tr><td>0</td><td>&nbsp;</td></tr>
<tr id="ligne1"><td>1</td><td><input type="button" onclick="affiche('ligne2');cache('ligne1');"></td></tr>
<tr id="ligne2" style="display:none;visibility:hidden;"><td>2</td><td><input type="button" onclick="affiche('ligne1');cache('ligne2');"></td></tr>
<tr id="ligne3"><td>3</td><td><input type="button" onclick="affiche('ligne4');cache('ligne3');"></td></tr>
<tr id="ligne4" style="display:none;visibility:hidden;"><td>4</td><td><input type="button" onclick="affiche('ligne3');cache('ligne4');"></td></tr>
</table>
<br>
</body>
</html>

Ça ne fonctionne pas correctement sous Firefox et Chrome et je ne comprends pas pourquoi : les deux <td> de mon <tr> sont fusionnés en un seul au moment de l'affichage.
Pire : ça fonctionne correctement sous IE8 ce qui me fend le coeur...

Pourriez-vous m'aider ?

09/09/2010, 11h52
RomainVALERI

Dans la fonction affiche, essaie d'assigner une chaine vide plutot que "block" à l'élément : il reprendra alors sa valeur par défaut, ce qui permet d'éviter des surprises de mise en page à cause d'éléments inline à qui on attribuerait un display:block...

Le display par défaut d'un tr n'est pas block mais table-row, d'où l'erreur d'affichage, sauf pour IE qui ne reconnait pas cette valeur :(

La meilleure solution est de remplacer 'block' par '' ce qui affecte la valeur par défaut :

Code:

1
2
3
4
5
6
7
8
9
function cache(idElement) {
    document.getElementById(idElement).style.display = "none";
    document.getElementById(idElement).style.visibility="hidden";
}
 
function affiche(idElement) {
    document.getElementById(idElement).style.display = "";
    document.getElementById(idElement).style.visibility="visible";
}

D'autre part, coupler visibility et display n'est pas trop judicieux... ils n'ont pas le même comportement.
Tu devrais te limiter à display :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script>
function cache(idElement) {
    document.getElementById(idElement).style.display = "none";
}
 
function affiche(idElement) {
    document.getElementById(idElement).style.display = "";
}
</script>
<body>
<table border="1">
<tr><td>0</td><td>&nbsp;</td></tr>
<tr id="ligne1"><td>1</td><td><input type="button" onclick="affiche('ligne2');cache('ligne1');"></td></tr>
<tr id="ligne2" style="display:none;"><td>2</td><td><input type="button" onclick="affiche('ligne1');cache('ligne2');"></td></tr>
<tr id="ligne3"><td>3</td><td><input type="button" onclick="affiche('ligne4');cache('ligne3');"></td></tr>
<tr id="ligne4" style="display:none;"><td>4</td><td><input type="button" onclick="affiche('ligne3');cache('ligne4');"></td></tr>
</table>
<br>
</body>
</html>

09/09/2010, 13h50
Tikaway

Merci à tous les deux pour vos réponses.
J'ai corrigé mon script et il fonctionne.