Geckozone

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.

[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]

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.

Merci PsyDk.

Ca fonctionne désormais sous le deux navigateurs.

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 devrait fonctionner, et bien sur enlever les deux styles CSS en-ligne