11548 sujets

JavaScript, DOM et API Web HTML5

Masquer un bout d'html quand on appui sur un bouton

Bonjour,

j'ai une série de tables les une en dessous des autres dans ma page html. EN dessus de chacune d'elle j'ai plaçé un bouton. Quand on appuis sur le bouton correspondant à la table, je vousdrais que cette dernière se masque. J'avais pensé à un bout de code comme celà :

d'abord le html


<input id="buttonModele" onclick=hide("1") type=button value=masquer />
<div id="cadre">
<table id="modele1">
	<tr>
		<td>fdsk jdkgjkj fhgkfhjkgfhk</td>
	</tr>
</table>
<input id="buttonModele" onclick=hide("2") type=button value=masquer />
<table id="modele2">
	<tr>
		<td>fdsk jdkgjkj fhgkfhjkgfhk</td>
	</tr>
</table>


et le javascript :

<script>
function hide(i)
{
	s = cadre.innerHTML;
	alert(s);
	var reg=new RegExp("(<table id=\"modele" + i + "\">.*?</table>)", "g");
	s = s.replace(reg,"<!--"+"$1"+"-->");
	alert(s);
	cadre.innerHTML = s;
}
</script>


En gros, mon idée est de mettre ma table en commentaire quand j'appuis sur le bouton. J'uilise pour cela les expressions régulières mais cela ne semble pas marcher ici. J'ai placé 2 alert(s) l'une avant le remplaçement, l'autre après et rien ne change dans s. Avez-vous une idée du problème ?

Pourquoi je choisi de mettre en commentaire ? Parce que je ne veux pas perdre l'information. Je voudrais après qu'en réappuyant sur le bouton, le commentaire s'en aille et que la table réaparaisse. Mais peut-être y a t-il une meilleurs manière de faire...

merci d'avance pour votre aide. Smiley smile
en fait, j'ai pensé à ça, mais la propriétée modele1.style.display = none; ne semblait pas marchait. Peut-être me suis je tromper dans la syntaxe ?

Par contre il m'interesserait de savoir pourquoi ma technique des expressions régulières ne marche pas.
Modifié par mathmax (21 Jan 2006 - 22:30)
ok merci, j'avais oublié les apostrophes autour de none. Mais par contre pourquoi mes expressions régulières ne marche pas ?
InnerHTML a parfois du mal, surtout avec IE... regarde le résultat obtenu avec ces deux scripts. Ils font fondamentalement la même chose, sauf que... donc il est facile d'imaginer que ton cas, ça ne fonctionne pas.

Ex 1 :

mondiv.innerHTML = "<ul>";
mondiv.innerHTML += "<li>blabla</li>";
mondiv.innerHTML += "<li>blabla</li>";
mondiv.innerHTML += "<li>blabla</li>";
mondiv.innerHTML += "</ul>";


Ex 2 :

var str = "<ul>";
str += "<li>blablabla</li>";
str += "<li>blablabla</li>";
str += "<li>blablabla</li>";
str += "</ul>";
mondiv.innerHTML = str;
merci.

deux questions :

- J'ai écris :
<script>
var str = "<ul>";
str += "<li>blablabla</li>";
str += "<li>blablabla</li>";
str += "<li>blablabla</li>";
str += "</ul>";
mondiv.innerHTML = str;
alert(mondiv.innerHTML);
</script>
</head>

<body>
<div id="mondiv"></div>
</body>


pourtant je ne reçois pas de message d'alerte pourquoi ? (j'ai aussi essayé avec l'autre exemple que tu m'as donné, c'est pareil).

- je ne pense pas cependant que mon erreur dans mon code d'origine soit dûe à innerHTML car j'ai placé 2 alert(s) l'une avant le remplaçement par les expressions régulières, l'autre juste après et rien ne change dans s (s est ma chaine qui subit le remplaçement). Donc à priori, il y a un problème au niveau de mon remplaçement par les expressions régulières. Sais tu où exactement ?
Tu cherches à mettre <!-- avant <table> et --> après </table>, c'est bien ça ?
Dans ce cas, l'expression régulière serait :
chaine.split(/(\r\n|\n|\r)/g).join(' ').replace(/(<table.*?</table>)/gi, "<!-- $1 -->")

Je fais sauter les sauts de ligne parce que je me rappelle avoir déjà eu des problèmes, le saut de ligne ne semble pas être accepté par le point, qui devrait normalement accepter n'importe quel caractère. Il faudrait une option genre PREG_TOTAL, mais je n'en ai jamais trouvé en js...
merci, mais j'avoue ne pas trop comprendre ce que tu veux faire avec ça :

chaine.split(/(\r\n|\n|\r)/g).join(' ')

j'ai vu que ces méthodes permettaient de retourner un tableau de sous-chaînes de caractères puis de le convertir en chaine de caractère, mais je ne comprends pas trop comment ça marche... Fais-tu cela pour supprimer tous les retours à la ligne ?

Ce sont eux qui posent problème dans mon code ?

pourquoi encadres-tu tes epxressions régulières de \ \g ? Est-ce pareil que de marquer , "g" ?
Modifié par mathmax (22 Jan 2006 - 16:45)
mathmax a écrit :
merci, mais j'avoue ne pas trop comprendre ce que tu veux faire avec ça :

chaine.split(/(\r\n|\n|\r)/g).join(' ')

j'ai vu que ces méthodes permettaient de retourner un tableau de sous-chaînes de caractères puis de le convertir en chaine de caractère, mais je ne comprends pas trop comment ça marche... Fais-tu cela pour supprimer tous les retours à la ligne ?

Exactement.

mathmax a écrit :

Ce sont eux qui posent problème dans mon code ?

Peut-être, je n'en suis pas sûr, mais j'ai déjà eu des problèmes avec les sauts de ligne pas très bien supportés dans les expression s régulières en js.

mathmax a écrit :

pourquoi encadres-tu tes epxressions régulières de \ \g ? Est-ce pareil que de marquer , "g" ?


En fait, les deux notations suivantes sont équivalentes, on peut utiliser celle qu'on veut quand on veut :
/blablabla/g
new RegExp("blablabla", "g")
ok mais pourquoi chaine.split(/(\r\n|\n|\r)/g).join(' ') permet-il de supprimer tous les retours à la ligne ?
C'est vrai que ce code mérite une explication. Maintenant que j'y pense, j'aurais aussi pu utiliser replace comme d'habitude, puisque j'utilise une expression régulière.

IL faut savoir que la fonction replace ne fonctionne pas avec une chaîne normale, donc sans expression régulière.

Mais bon puisque ce code est là, je vais t'expliquer.

Donc commençons par le début : split permet de transformer une chaîne de caractères en tableau en utilisant un séparateur défini. Ici, l'expression régulière (\r\n|\r|\n), ce que signifie soit la séquence \r\n pour windows, \n pour linux ou \r pour mac.
String.split dans ma référence js perso

Une fois la chaîne passée à la moulinette de split, on obtient donc un tableau contenant les différentes lignes de la chaîne de départ.

La fonction join de l'objet Array permet de transformer un tableau en chaîne en utilisant un séparateur défini. Ici, un espace.
Array.join dans ma référence js perso.

Donc on transforme notre tableau contenant les différentes lignes en chaîne, en utilisant un espace en guise de séparateur.

Bilan : on a transformé les sauts de ligne en espaces !
Ok merci pour l'explication !

Une dernière question : Pourquoi je ne reçois pas de message d'alerte avec ce code ?

<script>
var str = "<ul>";
str += "<li>blablabla</li>";
str += "<li>blablabla</li>";
str += "<li>blablabla</li>";
str += "</ul>";
mondiv.innerHTML = str;
alert(mondiv.innerHTML);
</script>
</head>

<body>
<div id="mondiv"></div>
</body>
Tu n'as pas de message d'erreur ?
Ajoute peut-être mondiv = document.getElementById('mondiv'); au tout début du code
en fait appliquer getElementById ne change rien... aucun message n'apparait. Je récapitule mon code :

<script>
mondiv = document.getElementById('mondiv');
var str = "<ul>";
str += "<li>blablabla</li>";
str += "<li>blablabla</li>";
str += "<li>blablabla</li>";
str += "</ul>";
mondiv.innerHTML = str;
alert(mondiv.innerHTML);
</script>
</head>

<body>
<div id="mondiv"></div>
</body>

Je précise : le javascript n'est pas désactivé dans mon navigateur Smiley cligne
Tu devrais avoir un message d'erreur, c'est pas possible autrement...
Essaie un truc : fais un alert après chaque instruction, pour savoir exactement où le script commence à bugger...
désolé toujours pas de messsage d'alerte. Même quand je mets alert dès lé début. Par contre si je mets alert("blabla"), le message s'affiche bien. Je te passe cette fois mon code en entier. Tu peux essayer de l'éxécuter de ton côté et peut être mieux voir où se trouve le bug.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<script>
mondiv = document.getElementById('mondiv');
alert(mondiv.innerHTML);
var str = "<ul>";
str += "<li>blablabla</li>";
str += "<li>blablabla</li>";
str += "<li>blablabla</li>";
str += "</ul>";
mondiv.innerHTML = str;
alert(mondiv.innerHTML);
</script>
</head>
</head>

<body>
</body>
</html>
Sujet clos
Aller à