Afficher/masquer ligne d'un tableau

**ramone** · 07/11/2011, 11h53

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 :

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

**Bovino** · 07/11/2011, 12h00

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Golgotha** · 07/11/2011, 12h01

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

Avec jQuery.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Tu peux même ajouter un petit effet :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Pour le ré-affichage :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Bovino** · 07/11/2011, 12h09

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.

**Golgotha** · 07/11/2011, 12h21

Envoyé par Bovino

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

**RomainVALERI** · 07/11/2011, 12h28

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

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

**Bovino** · 07/11/2011, 12h35

Envoyé par Golgotha

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

Ah...

Code html :

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

**Golgotha** · 07/11/2011, 12h41

Envoyé par RomainVALERI

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

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

**Bovino** · 07/11/2011, 12h43

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()

**Golgotha** · 07/11/2011, 12h52

Envoyé par Bovino

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

C'est pas faux

Faite pas comme moi, utilisez la norme

/me retourne mettre les mêmes id partout

**Bovino** · 07/11/2011, 13h10

Envoyé par Golgotha

/me retourne mettre les mêmes id partout

Punks not dead !

**javatwister** · 07/11/2011, 13h51

ben ça, c'est pas banal

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

)

**Golgotha** · 07/11/2011, 14h39

Envoyé par Bovino

Punks not dead !

Il en faut bien

**ramone** · 08/11/2011, 11h10

Ok, cela fonctionne avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part