Afficher/masquer ligne d'un tableau

Version imprimable

Bonjour,

Dans un tableau, je voudrais masquer les lignes avec l'id="certifie" lorsque l'on clique sur un bouton et réafficher ces lignes lorsque l'on clique sur un autre bouton.

J'utilise pour ceci 2 fonctions js, qui modifie le style.display de la ligne avec cet id :
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 function masqueRefCertifiee(conteneur){ var tBody = $s(conteneur); if (tBody.hasChildNodes()){ var ligne = tBody.childNodes; for (var i=0;i<ligne.length;i++){ if (ligne[i].hasChildNodes()){ if (ligne[i].id == 'certifie') ligne[i].style.display = "none"; } } } } function afficheRefCertifiee(conteneur){ var tBody = $s(conteneur); if (tBody.hasChildNodes()){ var ligne = tBody.childNodes; for (var i=0;i<ligne.length;i++){ if (ligne[i].hasChildNodes()){ if (ligne[i].id == 'certifie') ligne[i].style.display = "block"; } } } }
La 1ère fonction masque bien les lignes "certifie". la 2ème fonction réaffiche bien ces lignes, mais avec Firefox la mise en forme du tableau est perdue.
Toutes les cellules des lignes "certifie" se retrouve dans la 1ère colonne du tableau.
Sous IE cela fonctionne parfaitement !

Pourquoi Firefox perd l'aligment des colonnes ?
Comment puis-je résoudre ce problème ?

07/11/2011, 11h00
Bovino

Code:

ligne[i].style.display = "block";

Tout simplement parce que le display par défaut d'une ligne de tableau n'est pas "block" mais "table-row".
Ceci dit, le meilleur moyen pour lui redonner son display par défaut (parce que bizarrement, tous ceux acceptés en CSS ne le sont pas forcément en JavaScript) est d'affecter une chaine vide :

Code:

ligne[i].style.display = "";

Ceci dit, ton code me semble inutilement complexe et se base manifestement sur une structure HTML erronée puisqu'un id doit être unique dans la page...
07/11/2011, 11h01
Golgotha

Maintenant il y à quand même beaucoup plus simple pour faire cela :

Avec jQuery.

Code:

$("#certifie").hide();

Tu peux même ajouter un petit effet :

Code:

$("#certifie").hide("slow");

Pour le ré-affichage :

Code:

$("#certifie").show();
07/11/2011, 11h09
Bovino

:nono:

jQuery ne permettra pas de régler le problème des id identiques sur la page ;)

Surtout, cela reste une fonctionnalité relativement simple et triviale à réaliser sans avoir besoin d'ajouter jQuery à la page.
07/11/2011, 11h21
Golgotha

Citation:

Envoyé par Bovino

:nono:

jQuery ne permettra pas de régler le problème des id identiques sur la page ;)

Surtout, cela reste une fonctionnalité relativement simple et triviale à réaliser sans avoir besoin d'ajouter jQuery à la page.

Je ne suis pas du tout d'accord, les id identique sur des éléments HTML ne posent pas de problème et je trouve nettement plus élégant de faire cela avec jQuery, qui est conçu pour ça.

A la limite on utilisera la class de l’élément pour resté dans la "norme" mais c'est du pareil au même...
07/11/2011, 11h28
RomainVALERI

Citation:

Envoyé par Golgotha

Je ne suis pas du tout d'accord, les id identique sur des éléments HTML ne posent pas de problème

8O Ah quand même... désolé mais c'est indéfendable. ^^

Citation:

Envoyé par Golgotha

les id identique sur des éléments HTML ne posent pas de problème

Ah...

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
26
27
28
29
30
31
32
33
34
<!DOCTYPE HTML>
<html>
	<head>
	<title>Utilisation d'id multiples</title>
	<script src="http://code.jquery.com/jquery-1.7.js"></script>
	<script>
                $(function(){
                        $('#clic').click(function(){
                                $('#idmultiple').slideToggle();
                        });
                });
        </script>
	<style>
        #idmultiple{
                height: 50px;
                border: 2px solid grey;
                background-color: silver;
                margin: 10px;
        }
        #clic{
                cursor: pointer;
                border: 1px dotted silver;
        }
        </style>
	</head>
	<body>
		<div id="idmultiple">1</div>
		<div id="idmultiple">2</div>
		<div id="idmultiple">3</div>
		<div id="idmultiple">4</div>
		<div id="idmultiple">5</div>
		<div id="clic">Cliquer pour afficher / masquer les div</div>
</body>
</html>

:whistle:

07/11/2011, 11h41
Golgotha

Citation:

Envoyé par RomainVALERI

8O Ah quand même... désolé mais c'est indéfendable. ^^

pfiou, heureusement que c'est dans la norme W3C... un id qui ne serait pas un id ça serait un comble :mrgreen:

Si on va par la, à mon avis 1% (et encore..) des sites web respecte totalement la norme W3C, donc l'hypocrisie ce n'est pas ma tasse de thé ^^ mais si ça peux faire plaisir de remplacer "#" par ".", je le fait volontier...

ya t'il une réel incidence sur une page HTML si elle utilise deux id identique ?

@Bovino
Tu sais très bien que je peux faire un exemple ou j'aurais 50 id identiques qui ne poserons aucun problème... ;)
07/11/2011, 11h43
Bovino

Citation:

Envoyé par Golgotha

ya t'il une réel incidence sur une page HTML si elle utilise deux id identique ?

En JavaScript oui puisque tu ne peux plus utiliser getElementById()
07/11/2011, 11h52
Golgotha

Citation:

Envoyé par Bovino

En JavaScript oui puisque tu ne peux plus utiliser getElementById()

C'est pas faux :mrgreen:

Faite pas comme moi, utilisez la norme :ccool:

/me retourne mettre les mêmes id partout :aie:
07/11/2011, 12h10
Bovino

Citation:

Envoyé par Golgotha

/me retourne mettre les mêmes id partout :aie:

Punks not dead ! :ptdr:
07/11/2011, 12h51
javatwister

ben ça, c'est pas banal 8O

une question simple: Pourquoi mets-tu des id dans ton HTML?

une question ouverte: je pense que la notion de troll est dépassée; pourquoi pas destroill?

(Bovino :mrgreen:)
07/11/2011, 13h39
Golgotha

Citation:

Envoyé par Bovino

Punks not dead ! :ptdr:

Il en faut bien :mrgreen:
08/11/2011, 10h10
ramone

Ok, cela fonctionne avec

Code:

ligne[i].style.display = "";

Oui, effectivement c'est plus opportun d'utiliser la class pour réaliser cela.
Je charge déjà JQuery pour autre chose, donc c'est plus pratique pour moi de l'utiliser.

Par contre pour le petit effet :

Code:

$(".certifie").hide("slow");

Sur une centaine de lignes cela prend beaucoup de temps (20s.) même avec "fast" c'est trop long et l'effet n'est pas au rendez-vous :(

Merci pour votre aide :D