Problème affichage dynamique code HTML sous Firefox

[MrT]

Bonjour.

J'essaie d'afficher de manière dynamique une <tr>.

Pour faire ça je gère un évènement javascript onchange sur une select box.

En fonction de la valeur selectionnée dans la select box, j'affiche telle ou telle <tr>. Chaque <tr> porte le style "display:none" au départ. La fonction javascript appelée lors du onchange ne fait que changer le style à "display:inline".

Mon problème vient lors de l'affichage de la <tr>. Celle ci "chevauche" d'autres éléments de mon tableau, et ne fait pas la longueur attendue.

Voici de manière réduite le code utilisé au départ.

<select name="type_recherche" id="type_recherche" onchange="afficheTypeRecherche(this);">
<option value="-1">-- Choisissez un type de recherche --</option>
<option value="rechauteur">Recherche par auteur</option>
<option value="rechtypeorg">Recherche par type d'organisation</option>
</select>

<table>
<tr valign="top" id="rechauteur" style="display:none;">
<td>
contenu td
</td>
</tr>

<tr valign="top" id="rechtypeorg" style="display:none;">
<td>
contenu td
</td>
</tr>
</table>

Voici la fonction javascript qui me permet d'afficher la bonne tr.

function afficheTypeRecherche(obj){
document.getElementById("rechauteur").style.display = "none";
document.getElementById("rechtypeorg").style.display = "none";

if (obj.value != -1){
var element = document.getElementById(obj.value);
element.style.display = "inline";
}

}

Si j'affiche directement la <tr> sans "display:none", les longueurs sont respectées et il n'y a pas de chevauchement.

J'ai essayé avec l'attribut "block" au lieu de "inline", je n'ai plus de problème de chevauchement, mais à chaque changement de valeur dans ma select box, la <tr> concernée s'affiche au dessus de la précédente, alors qu'elle devrait la remplacer.

Avez vous une idée sur le problème. Est-ce qu'il y a une manière standard d'utiliser le style display ?

Je ne rencontre pas le problème sous ie.
J'utilise Firefox 1.0.4.

Merci d'avance.

[Mori]

[moderation] ça ressemble à s'y méprendre à une page d'un site que tu construis, non ? bon, je déplace. donne-nous aussi le lien de la page, pour qu'on puisse t'aider. [/moderation]

[PsyDk]

Code : Tout sélectionner

element.style.display = "";

Ainsi le « tr » prendra son style naturel, qui est « table-row ».

Note : on peut fixer display à "table-row" aussi mais du coup c'est IE qui n'aimera pas.

[MrT]

Merci PsyDk.

Ca fonctionne désormais sous le deux navigateurs.

[calimo]

Il reste encore un petit souci : sans javascript, rien n'est affiché du tout, c'est bien dommage.

Donc il faut cacher ces lignes en javascript au chargement. Un petit

Code : Tout sélectionner

window.onload=function() {
document.getElementById("rechauteur").style.display = "none";
document.getElementById("rechtypeorg").style.display = "none";
}

devrait fonctionner, et bien sur enlever les deux styles CSS en-ligne