11548 sujets

JavaScript, DOM et API Web HTML5

Masquer dynamiquement les lignes d'un tableau

Bonjour,

J'ai écris un script qui, à chaque fois qu'on tape une lettre dans une textbox, recherche les éléments d'une liste de produits qui contiennent le texte de la textbox. Ces éléments sont présenter dans un tableau, et je dois masquer les lignes des produits qui ne correspondent pas à la recherche.

Pour masquer mes lignes, j'ai pensé écrire :

maligne.style.display = "none";


Pour les faire apparaître (quand l'utilisateur efface des lettre dans le champ de recherche) :

maligne.style.display = "inline";


Ca marche bien avec IE, mais pas avec Firefox.

Auriez-vous une solution compatible avec les 2 navigateurs ?

merci d'avance.
Salut,

Et si tu construisait ton tableau dynamiquement? avec php par exemple ( pour cité mon language fetiche ). j'imagine que tu dois déjà avoir qqchose comme ça puisque tu fais une requete.

pascal
non, mon tableau est construit dynamiquement côté serveur (transformation XSLT). Une fois envoyé chez le client, je veux modifier le dom pour filtrer les lignes correspondant au résultat de la recherche.
Bon, ce n'est pas forcément ce que tu cherches à faire mais j'ai eu le même genre de cas à résoudre en vitesse et je n'ai pas trouvé mieux que de foutre le height du tr à 0.
C'est brutasse mais ça marche.
Salut
Va savoir pourquoi, display block ou inline fonctionne mal sur FF et Opera.
Pour afficher, laisse faire le navigateur en laissant display vide :
maligne.style.display = "";

a+
merci pour vos réponses.

En fait, jouer sur height ne me conviens pas parce que toutes mes lignes n'ont pas la même hauteur, et je ne tiens pas à les garder en mémoire car il y en a beaucoup et cela ralentirait encore mon script qui est déjà limite au niveau rapidité.

La technique de jeje ne fonctionne pas non plus...

Auriez-vous d'autre solutions ?

merci d'avance.
Hu ?
Comment récupères-tu maligne ?
J'ai testé ceci avec succès sur IE6, FF 1.5-et-des-brouettes, Opera 9

<script type="text/javascript">
function aff (  )
{
    tr = document.getElementById('tr2');
    tr.style.display = "";
}
function cach (  )
{
    tr = document.getElementById('tr2');
    tr.style.display = "none";
}
</script>




<table id="t">
    <tr id="tr1"><td>1-1</td><td>1-2</td><td>1-3</td></tr>
    <tr id="tr2"><td>2-1</td><td>2-2</td><td>2-3</td></tr>
    <tr id="tr3"><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table>
<a href="javascript:aff();">Afficher</a> - <a href="javascript:cach();">Masquer</a>
Salut,
MacIntoc a écrit :
Et avec display:table-row plutôt que display:block ?

C'est en effet la bonne solution. Cependant, il me semble qu'elle ne fonctionne pas bien avec IE qui préfère un display: block.

La technique de jeje permet de remettre la propriété "display" à sa valeur spécifiée dans les CSS.

De façon générale, l'idéal est de ne pas modifier les styles directement mais de passer par une classe. Par exemple :
[b]CSS[/b]
.hidden {display: none;}

[b]JS[/b]
function setVisibility(row, visible) {
  row.className = visible ? "" : "hidden";
}

A améliorer éventuellement, mais l'idée est là.
Sujet clos
Aller à