Remplacer une ligne de tableau par une autre

**Tikaway** · 09/09/2010, 11h10

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 :

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
 
<!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 ?

**RomainVALERI** · 09/09/2010, 11h52

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...

**Bovino** · 09/09/2010, 11h55

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

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
<!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>

**Tikaway** · 09/09/2010, 13h50

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

Remplacer une ligne de tableau par une autre

JavaScript

Discussions similaires

Partager

Partager