Afficher/masquer ligne d'un tableau [Résolu]

ramone · 07/11/2011, 10h53

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, 11h00

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, 11h01

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, 11h09

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, 11h21

Citation:

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, 11h28

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

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

Bovino · 07/11/2011, 11h35

Citation:

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, 11h41

Citation:

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, 11h43

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

Golgotha · 07/11/2011, 11h52

Citation:

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, 12h10

Citation:

Envoyé par Golgotha

/me retourne mettre les mêmes id partout

Punks not dead !

javatwister · 07/11/2011, 12h51

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, 13h39

Citation:

Envoyé par Bovino

Punks not dead !

Il en faut bien

ramone · 08/11/2011, 10h10

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

$(".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

07/11/2011, 11h00	#2
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 808 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 808 Points : 35 793 Points : 35 793	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... __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

07/11/2011, 11h01	#3
Golgotha Modérateur cédric Développeur informatique Inscription : août 2007 Messages : 732 Détails du profil Informations personnelles : Nom : cédric Âge : 27 Localisation : France Informations professionnelles : Activité : Développeur informatique Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : août 2007 Messages : 732 Points : 1 562 Points : 1 562	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(); __________________ modérateur webmasters - développements web & php faq jQuery - règles du forum - faqs web mon espace perso Venez participez au deuxième defi Web !
	00

07/11/2011, 11h09	#4
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 808 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 808 Points : 35 793 Points : 35 793	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. __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

07/11/2011, 12h51	#12
javatwister Expert Confirmé danseur Inscription : août 2003 Messages : 2 667 Détails du profil Informations personnelles : Sexe : Localisation : France, Calvados (Basse Normandie) Informations professionnelles : Activité : danseur Informations forums : Inscription : août 2003 Messages : 2 667 Points : 3 035 Points : 3 035	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 ) __________________ On ne mord pas, on manifeste seulement notre tristesse face à des exposés de situations qui défient notre entendement binaire.
	00

08/11/2011, 10h10	#14
ramone Invité régulier Inscription : janvier 2007 Messages : 17 Détails du profil Informations personnelles : Sexe : Âge : 38 Localisation : Suisse Informations forums : Inscription : janvier 2007 Messages : 17 Points : 9 Points : 9	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 $(".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
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email