11484 sujets

JavaScript, DOM et API Web HTML5

Pages :
(reprise du message précédent)

Heyoan a écrit :
En fait l'idée de voir la page en ligne était une bonne idée...


je t'ai envoyé un MP

beegees
C'est tout à fait normal puisque l'alert met en pause l'exécution du script et permet au document DOM d'être prêt, donc sans alert c'est undefined.

Ce qui veut dire que ton code est executé avant que le DOM soit prêt. Si tu boss avec un framework, renseigne toi pour connaitre sa méthode "document ready" ($() pour jQuery par exemple), sinon, ajoute un eventListener à l'événement load, ou si t'as la flemme, définie la fonction window.onload et mets tout dedans...
beegees a écrit :
je t'ai envoyé un MP
Tu aurais mieux fait de l'envoyer à Ze Nenex qui m'a l'air bien plus calé que moi en JS ! Smiley langue

Quoi qu'il en soit (et en ayant le code sous les yeux) il me semble bien que le problème vient de ce que ta fonction occupe() n'attend qu'1 argument (libre_ou_occupe) alors que dans le code html tu essaies d'en passer 2 : occupe(global_id_jour,'occupe') dont notre fameux global_id_jour. Smiley murf

Sinon, puisque tu n'utilises pas window.onload tu ferais sans doute mieux de charger ton JavaScript à la fin de ton code HTML... et mieux encore tu devrais essayer de factoriser tout ton code qui n'en serait que plus lisible (par exemple au lieu d'avoir un onmousedown dans chaque élément TD utiliser addEvent).

Autresinon pourquoi est-ce qu'à la fin de ton code il y a la ligne
<script type="text/javascript">var global_id_jour= null;</script>
?


Edit: Je n'avais pas fait attention mais je vois que le tableau est généré en Ajax (ce qui semble bien confirmer l'hypothèse de Ze Nenex). Question : quel est l'intérêt ? Pourquoi ne pas utiliser un formulaire classique pour choisir le mois et l'année et ne faire que du PHP ?
Modifié par Heyoan (07 Aug 2009 - 22:27)
Ze Nenex a écrit :
C'est tout à fait normal puisque l'alert met en pause l'exécution du script et permet au document DOM d'être prêt, donc sans alert c'est undefined.

Ce qui veut dire que ton code est executé avant que le DOM soit prêt. Si tu boss avec un framework, renseigne toi pour connaitre sa méthode "document ready" ($() pour jQuery par exemple), sinon, ajoute un eventListener à l'événement load, ou si t'as la flemme, définie la fonction window.onload et mets tout dedans...


Salut Ze nenex,

Une bonne nuit de repos sans penser à javascript, AJAX, PHP.... ça fait du bien.

Ta réponse m'apprend beaucoup de choses, merci.

Je ne travaille avec aucune framework, je fais de l'AJAX pure et dure.

eventListener c'est avec jquery ? après une recherche sur google, je ne trouve des infos que sur Flex.

Tout mettre dans le body onload alors ?

Encore merci pour ton aide.

beegees
Heyoan a écrit :
Tu aurais mieux fait de l'envoyer à Ze Nenex qui m'a l'air bien plus calé que moi en JS ! Smiley langue








Salut Yoan,

Merci pour ta réponse.

[quote=Heyoan]Quoi qu'il en soit (et en ayant le code sous les yeux) il me semble bien que le problème vient de ce que ta fonction occupe() n'attend qu'1 argument (libre_ou_occupe) alors que dans le code html tu essaies d'en passer 2 : occupe(global_id_jour,'occupe') dont notre fameux global_id_jour. Smiley murf


En fait, j'ai du code pour la première semaine du mois, pour la dernière semaine du mois et pour les semaines du mois qui sont entre la première et entre la dernière.

J'ai donc trois fois du code.

J'ai adapté le code une seule fois (donc un seul paramètre envoyé à occupe.js) afin de tester et de ne pas changer pour rien trop de chose.

Je vais maintenant retirer un paramètre pour la première et dernière semaine.


Heyoan a écrit :
Sinon, puisque tu n'utilises pas window.onload tu ferais sans doute mieux de charger ton JavaScript à la fin de ton code HTML...


C'est une bonne idée, je ne pensais pas que l'on pouvait le faire

Heyoan a écrit :
et mieux encore tu devrais essayer de factoriser tout ton code qui n'en serait que plus lisible (par exemple au lieu d'avoir un onmousedown dans chaque élément TD utiliser addEvent).


J'apprends à créer des sites et cette remarque est très importante pour moi, merci Yohan.

Heyoan a écrit :
Edit: Je n'avais pas fait attention mais je vois que le tableau est généré en Ajax (ce qui semble bien confirmer l'hypothèse de Ze Nenex). Question : quel est l'intérêt ? Pourquoi ne pas utiliser un formulaire classique pour choisir le mois et l'année et ne faire que du PHP ?


Je trouve que c'est plus prof en AJAX.

Ma seule erreur est d'avoir conçu un site web 100% fonctionnel pour firefox sans à chaque avancée avoir contrôlé avec internet Explorer.

Encore un grand merci à vous tous pour tout.

beegees
beegees a écrit :
Je trouve que c'est plus prof en AJAX.
Oui mais bon : Ajax ne devrait servir qu'à l'interactivité. S'il s'agit de charger toute une page il est non seulement inutile (si ce n'est pour éviter les quelques millisecondes durant lesquelles la page va disparaître) mais en plus cela t'oblige à surcharger le code pour justement gérer le fait qu'il faut alors attendre que le DOM soit complètement créé et que tes variables soient accessibles. En clair tu te fais plaisir mais ton visiteur s'en contrefiche ! Smiley biggrin

Je ne parle même pas de l'accessibilité qui dans ton cas ne semble pas être primordiale puisque ton document s'apparente plutôt à une application web mais dans d'autres situations ce serait vraiment un gros problème.

Sinon, et ça n'engage que moi, je trouve qu'une bibliothèque comme jQuery simplifie grandement l'utilisation d'Ajax et rend le code beaucoup plus clair : je t'invite à essayer.
Modifié par Heyoan (08 Aug 2009 - 10:51)
J'ai essayé de l'utiliser mais sans succès.

Est-ce que ce site à un bon tuto sur jquery ?

Merci encore.

beegees
beegees a écrit :


Salut Ze nenex,

Une bonne nuit de repos sans penser à javascript, AJAX, PHP.... ça fait du bien.

Ta réponse m'apprend beaucoup de choses, merci.

Je ne travaille avec aucune framework, je fais de l'AJAX pure et dure.

eventListener c'est avec jquery ? après une recherche sur google, je ne trouve des infos que sur Flex.

Tout mettre dans le body onload alors ?

Encore merci pour ton aide.

beegees

Bosser sans framework n'est pas une tâche facile quand il s'agit d'approcher les event ou de manipuler du DOM, ça devient très vite verbeux et ch***. Déjà, et Heyoan te l'a bien dit, factorise tout ça. Exemple: des fonctions bId, bTN qui évitent les document.getElementByblablabla à rallonge, ainsi que les façades addEvent, removeEvent ou XHR sont basiques mais indispensables pour une compatibilités minimales des navigateurs.

Ensuite, je n'ai pas tout ton code sous les yeux, mais quand il s'agit d'attaquer du DOM, le strict minimum est d'attendre que ce dernier soit prêt. L'ultra basique et l'archi-pas-recommandé est de passer par la propriété (fonction) window.onload. Dans le même domaine de "craditude", tu peux mettre ton script tout en bas de la balise body... Mais le mieux pour commencer est de se servir d'une façade genre "addEvent" (google est ton ami) pour attribuer un "handler" (une fonction) à l'événement load: addEvent(window, "load", myFunction);

Dernière chose. Oublie les variables globales et pense plutôt à un namespace. En plus, en JS ce n'est pas bien compliqué, tu mets tout dans un objet :
myNS = {
  init: function(e) {
  },

  ID_JOUR: null
  // ...
};

addEvent(window, "load", myNS.init);
De cette façon tu évites de polluer l'espace globale et tu permets à d'éventuels autres namespace de cohabiter / discuter entre eux. En ayant tout ça, crois-moi, ton problème serait réglé.

Pour répondre à ta question, eventListener n'est pas du jQuery. Il s'agit plutôt des méthodes DOM addEventListener et removeEventListener, non compatible IE, d'où l'intérêt de les encapsuler dans une méthode dite "façade" qui se chargera du bon comportement (IE = attachEvent et pas de phase de capturing). Tu en trouveras pleins sur le net.

*Reprend son soufle*

Bon courage Smiley cligne
Heyoan a écrit :
Serais-tu en train de dire que tu ne connais pas encore la Recherche de la section Apprendre ? Smiley langue

Cela dit les tutos concernant jQuery ne parlent pas d'Ajax mais ce n'est pas bien dur d'en trouver une foultitude sur le Web.


Ma question ne servait à rien, je connais la fonction de recherche, j'avais trouvé l'article sur le jquery.

Je réponds à Ze maintenant.

Merci pour tout.

beegees
*Reprend son soufle*

Bon courage Smiley cligne



Re,

Un tout grand merci pour ta réponse qui me met sur plusieurs pistes.

Ze Nenex a écrit :
Bosser sans framework n'est pas une tâche facile quand il s'agit d'approcher les event ou de manipuler du DOM, ça devient très vite verbeux et ch***.


Je suis d'accord mais ça permet de bien comprendre le fonctionnement d'AJAX (je pense)

Ze Nenex a écrit :

Déjà, et Heyoan te l'a bien dit, factorise tout ça. Exemple: des fonctions bId, bTN qui évitent les document.getElementByblablabla à rallonge, ainsi que les façades addEvent, removeEvent ou XHR sont basiques mais indispensables pour une compatibilités minimales des navigateurs.


Factoriser c'est donc "créer un raccourci" ?



Ze Nenex a écrit :

Ensuite, je n'ai pas tout ton code sous les yeux, mais quand il s'agit d'attaquer du DOM, le strict minimum est d'attendre que ce dernier soit prêt.


Si tu le souhaite, je peux aussi te passer les identifiants et l'adresse du site.

Ze Nenex a écrit :

L'ultra basique et l'archi-pas-recommandé est de passer par la propriété (fonction) window.onload. Dans le même domaine de "craditude", tu peux mettre ton script tout en bas de la balise body...


Ze Nenex a écrit :

Vu que tu me déconseilles ces pratiques, je ne vais pas le faire, je vais commencer à procéder d'une façon correcte.


Ze Nenex a écrit :

Mais le mieux pour commencer est de se servir d'une façade genre "addEvent" (google est ton ami) pour attribuer un "handler" (une fonction) à l'événement load: addEvent(window, "load", myFunction);


Je vais commencer par ça je pense, je vais faire une recherche sur goolge.

Ze Nenex a écrit :

Dernière chose. Oublie les variables globales et pense plutôt à un namespace. En plus, en JS ce n'est pas bien compliqué, tu mets tout dans un objet :
myNS = {
  init: function(e) {
  },

  ID_JOUR: null
  // ...
};

addEvent(window, "load", myNS.init);
De cette façon tu évites de polluer l'espace globale et tu permets à d'éventuels autres namespace de cohabiter / discuter entre eux. En ayant tout ça, crois-moi, ton problème serait réglé.



Je suis très intéressé par cette information, le namespace (espace de noms) permet donc de créer une zone mémoire avec des variables qui sont regroupés par utilité et disponible partout dans le site ? si c'est ça, ça m'intéresse beaucoup.

Ze Nenex a écrit :

Pour répondre à ta question, eventListener n'est pas du jQuery. Il s'agit plutôt des méthodes DOM addEventListener et removeEventListener, non compatible IE, d'où l'intérêt de les encapsuler dans une méthode dite "façade" qui se chargera du bon comportement (IE = attachEvent et pas de phase de capturing). Tu en trouveras pleins sur le net.


Merci pour l'info, le DOM me semble très vaste et assez compliqué à manipuler...

Un super grand merci pour avoir répondu en détail à mon problème.

Tu es vraiment gentil, patient et efficace.

beegees
beegees a écrit :
Je suis très intéressé par cette information, le namespace (espace de noms) permet donc de créer une zone mémoire avec des variables qui sont regroupés par utilité et disponible partout dans le site ? si c'est ça, ça m'intéresse beaucoup.

L'utilité d'un namespace en programmation vient surtout de l'ambiguïté que peut produire deux fonctions / opérateurs / variables ayant le même nom. com.software.doSomething fera autre chose que net.software.doSomething et seront bien distincts.

Certains langages comme Java (packages) ou Python (modules) proposent cette fonctionnalité en natif. En Javascript, l'interprétation qu'on en fait résulte généralement en l'utilisation d'objets directement affectés à l'espace globale (objet window pour un navigateur), comme illustré dans mon précédent message.

Certains framework Javascript le font et c'est le cas de jQuery qui par ailleurs devient de plus en plus LE framework. Mais ne te lance pas trop vite dedans, car tu l'as bien souligné, il faut avant tout connaitre les bases du langage.

beegees a écrit :
Factoriser c'est donc "créer un raccourci" ?

C'est un aspect qu'on nomme "alias". Mais ce n'est pas le seul loin de là. Une factorisation poussée passe par l'utilisation de design pattern (toute une histoire...). Façade en est un et te fourni un comportement abstrait simplifié quelque soit la complexité pour l'obtenir.

Par exemple, jQuery utilise ce pattern à profusion afin de produire des fonctions cross-browser. Je te parlais d'XHR (ou XMLHttpRequest). C'est en général le nom qu'on donne à cette méthode façade pour produire un objet "requête" au comportement identique quelque soit le navigateur. Pareil pour addEvent / removeEvent.

Design pattern Façade
Re,

Merci pour tes explications.

J'ai donc compris le principe de espace de noms.

Maintenant, j'ai suivis ton conseil, j'utilise un addEvent comme ceci :


<script type="text/javascript">
		function addEvent(obj, event, fct) 
		{
			if (obj.attachEvent) //Est-ce IE ?
				obj.attachEvent("on" + event, fct); //Ne pas oublier le "on"
			else
				obj.addEventListener(event, fct, true);
		}
	</script>


Je déclare donc le code ci-dessus dans la page principale.

Dans la même page, j'ai mis ceci juste en dessous du body :


<script type="text/javascript">addEvent(window , "load", occupe);</script>


donc sur l'évènement onload, j'appelle la fonction "occupe".

On ne peut pas passer d'argument ? la fonction "occupe" prend un argument.

Je ne sais pas si c'est à cet endroit là que je dois mettre cette ligne de code ?

La fonction "occupe" devrait être appelée au moment où je clique sur un div :


<div id="menucontextuelProposer_Reservation" class="menucontextuel">
		<ul>
			<li><em>Demande de réservation</em></li>
			<li><a href="javascript:;"onClick="hideMenu(); occupe('proposer'); return false;">Proposer une r&eacute;servation</a></li>
			<li><a href="javascript:;"onClick="hideMenu(); occupe('ESC'); return false;">Annuler</a></li>
		</ul>
	</div>


Merci d'avance pour votre aide.

beegees
Modérateur
Salut, Smiley cligne

<jingle><pub>
Ze Nenex a écrit :
(...) jQuery qui par ailleurs devient de plus en plus LE framework.
euh... Attention ! Tu tires des conclusions hâtives, l'ami ! Smiley biggrin
Un peu de lecture qui ne tombe pas dans un débat stérile : http://jqueryvsmootools.com/
(non pas pour troller mais pour préciser qu'il ne s'agit qu'une question d'objectifs et de point de vue)
Et puis, un peu de pluralité ne fait pas de mal. Smiley smile

</pub></jingle>

beegees a écrit :
Je déclare donc le code ci-dessus dans la page principale.
Tel que tu as écrit ta fonction addEvent, les méthodes attachEvent et addEventListener ne fonctionnent pas dans le même mode; tu risques donc d'avoir quelques surprises. Smiley cligne
Le troisième paramètre que tu passes à addEventListener est le mode de propagation : capturant ou... "effervescent".
Aussi, attachEvent n'offre pas ce contrôle; IE ne connait pas le mode capturant, d'où le fait qu'on l'évite.
Il serait donc préférable de passer ta variable à "false". (C'est précisé dans le lien que t'a fournit Heyoan)

Par ailleurs, addEventListener est la norme et attachEvent, l'exception. Cela ne porte pas trop à préjudice de le laisser tel quel mais, d'une manière générale, il vaut mieux privilégier la norme PUIS gérer les exceptions en cas de mauvaise interprétation.

beegees a écrit :
Dans la même page, j'ai mis ceci juste en dessous du body
Tu peux même mettre cette instruction dans un fichier externe. Dès lors, tu peux centraliser tous tes scripts dans ce fichier, ce qui facilite la maintenance et tu disposes ainsi, si tu le souhaites, de cette fonction sur chacune de tes pages sans avoir à la redéclarer.

beegees a écrit :
On ne peut pas passer d'argument ? la fonction "occupe" prend un argument.
Il est tout à fait possible de passer une fonction en argument de addEvent puis, au sein de celle-ci, exécuter la fonction "occupe" en lui passant un argument.
Salut Koala,

Merci pour ta réponse très intéressante.

a écrit :
Tel que tu as écrit ta fonction addEvent, les méthodes attachEvent et addEventListener ne fonctionnent pas dans le même mode; tu risques donc d'avoir quelques surprises. cligne
Le troisième paramètre que tu passes à addEventListener est le mode de propagation : capturant ou... "effervescent".
Aussi, attachEvent n'offre pas ce contrôle; IE ne connait pas le mode capturant, d'où le fait qu'on l'évite.
Il serait donc préférable de passer ta variable à "false". (C'est précisé dans le lien que t'a fournit Heyoan)

Par ailleurs, addEventListener est la norme et attachEvent, l'exception. Cela ne porte pas trop à préjudice de le laisser tel quel mais, d'une manière générale, il vaut mieux privilégier la norme PUIS gérer les exceptions en cas de mauvaise interprétation.


J'ai appliqué les deux changements que tu m'indiques.

Je n'ai pas bien compris pourquoi passer de true à false dans le 3e paramètre mais ce n'est pas très grave pour l'instant, je lirai ton tuto en profondeur quand j'aurai 5 minutes.

Voici donc mon nouveau code :

<script type="text/javascript">
		function addEvent(obj, event, fct) 
		{			
			if (obj.addEventListener) //Est-ce Firefox de Mozilla ?
				obj.addEventListener(event, fct, false);
			else				
				obj.attachEvent("on" + event, fct); //Ne pas oublier le "on"
		}
	</script>


a écrit :

Tu peux même mettre cette instruction dans un fichier externe. Dès lors, tu peux centraliser tous tes scripts dans ce fichier, ce qui facilite la maintenance et tu disposes ainsi, si tu le souhaites, de cette fonction sur chacune de tes pages sans avoir à la redéclarer.


OK, ça je l'ai fait aussi :


<script type="text/javascript" src="Fonctions/addEvent.js"></script>


Que veux-tu dire par cette phrase ? :

a écrit :

Dès lors, tu peux centraliser tous tes scripts dans ce fichier


ça veut dire que je mets toutes les fonctions qui vont appeler addEvent en dessous de la déclaration corrigée ci-dessus ?

a écrit :

Il est tout à fait possible de passer une fonction en argument de addEvent puis, au sein de celle-ci, exécuter la fonction "occupe" en lui passant un argument.


Ici, ça se complique pour moi.

J'ai cet élément :


<li id="appel_occupe"><a href="javascript:;"onClick="hideMenu(); occupe('proposer'); return false;">Proposer une r&eacute;servation</a></li>


Je voudrais donc que sur les éléments dont l'id (sur le onclick) est "appel_occupe" que :

- on appelle la fonction "occupe"
- qu'on lui passe un paramètre
- qu'on attende que le DOM soit complètement chargé car autrement, la variable n'arrive pas

Je présume que ceci :


<a href="javascript:;"onClick="hideMenu(); occupe('proposer'); return false;">Proposer une r&eacute;servation</a>


ne sera alors plus nécessaire ?

Un super grand merci à toi Koala ainsi qu'à Ze et à Heyoan.

beegees
Heyoan a écrit :
voir Factorisation (Wikipedia).

Sinon je te redonne le lien vers le tuto de koala64 : Comment bien coder en Javascript (à lire d'urgence Smiley smile ).


Re,

On m'a dit que IE ne recevait pas les paramètres sur un évènement.

J'ai testé, et j'ai remarqué en effet que mes paramètres n'étaient pas arrivés dans la fonction avec IE :


alert("param 1" + e);
alert("param 2" + pIdMenu);
alert("param 3" + id_jour);
alert("param 4" + user);


Résultat :

a écrit :

param 1 [objectEvent]
param 2
param 3 undefined
param 4 undefined


Qu'en penses-tu ?

Merci.

beegees
Re',

je suppose que tu veux parler de cela :
function test(event) {
   var oElem = event.target || window.event.srcElement;
   alert(oElem.id);
}
... ou pas ?
Modifié par Heyoan (09 Aug 2009 - 11:31)
Heyoan a écrit :
Re',

je suppose que tu veux parler de cela :
function test(event) {
   var oElem = event.target || window.event.srcElement;
   alert(oElem.id);
}
... ou pas ?


Re,

Je t'avoue que je ne comprends plus rien.

Je n'ai aucune solution à mon problème.

Je suis bloqué.

beegees
En repassant par là je me rends compte que je n'avais pas cité le tuto de Julien qui pourrait t'être d'une aide précieuse : La gestion des événements en JavaScript (en même temps tu aurais pu chercher toi-même ! Smiley ravi )

Par rapport à ta problématique, il me semble (je n'ai malheureusement gardé ni ton code ni ton MP Smiley biggol ) que le code suivant pourrait t'aider :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style type="text/css">
td {
	border: 1px solid blue;
}
</style>
<script type="text/javascript">
<!-- 
// fonction addEvent (http://www.scottandrew.com/weblog/jsjunk)
function addEvent(oElem, sEvType, fn, bCapture)
{
   return oElem.addEventListener?
      oElem.addEventListener(sEvType, fn, bCapture):
      oElem.attachEvent?
         oElem.attachEvent('on' + sEvType, fn):
         oElem['on' + sEvType] = fn;
}

// fonction test
var oTest =
{
	// Initialisation des évènements sur les TD
	_Init: function()
	{
		// Récupération de tous les TD de la table
		var lTDs = document.getElementById('maTable').getElementsByTagName('td');
		if(!lTDs) return;
		for(var iI = 0; iI < lTDs.length; ++iI){	// Pour chaque TD...
			var eTD = lTDs[iI];
			// addEventListener
			addEvent(eTD, 'contextmenu', oTest._ReturnFalse, false);
			addEvent(eTD, 'mousedown', oTest._ClickDroit, false);
		}
	},
	
	// On désactive contextmenu sur les TD pour éviter les conflits avec ClickDroit
	_ReturnFalse: function(event)
	{
		if (event.preventDefault) { 
		  event.preventDefault(); 
		} 
		event.returnValue = false;
	},
	
	// Affichage Clic Droit
	_ClickDroit: function(event)
	{
		var oElem = event.target || window.event.srcElement;
		if(event.button==2) {
			alert("Vous avez fait un clic droit sur " + oElem.id);
		} else {
			alert("Vous n'avez pas fait un clic droit sur " + oElem.id);
		}
	}
};
if(document.getElementById && document.getElementsByTagName) addEvent(window, 'load', oTest._Init, false);
-->
</script>
</head>
<body>
<table id="maTable">
	<tr>
		<td id="td1_1">Bla Bla 1_1</td>
		<td id="td1_2">Bla Bla 1_2</td>
		<td id="td1_3">Bla Bla 1_3</td>
	</tr>
	<tr>
		<td id="td2_1">Bla Bla 2_1</td>
		<td id="td2_2">Bla Bla 2_2</td>
		<td id="td2_3">Bla Bla 2_3</td>
	</tr>
</table>
</body>
</html>


Edit: code modifié pour la compatibilité avec Opera (à noter que sur ce navigateur la détection du clic droit est désactivée par défaut).
Modifié par Heyoan (09 Aug 2009 - 16:55)
Bonjour Heyon,

Merci pour ton aide très appréciée.

J'avais vu cet article hier, je vais le relire attentivement.

J'ai ajouté ton code comme ceci :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Test</title> 
<style type="text/css"> 
td { 
    border: 1px solid blue; 
} 
</style> 
<script type="text/javascript"> 
 
// fonction addEvent (http://www.scottandrew.com/weblog/jsjunk) 
//fonction générique pour IE et pour FF
function addEvent(oElem, sEvType, fn, bCapture) 
{ 
   return oElem.addEventListener? 
      oElem.addEventListener(sEvType, fn, bCapture): 
      oElem.attachEvent? 
         oElem.attachEvent('on' + sEvType, fn): 
         oElem['on' + sEvType] = fn; 
} 
 
// fonction test 
var oTest = 
{ 
    // Initialisation des évènements sur les TD 
    _Init: function() 
    { 
        // Récupération de tous les TD de la table 
        var lTDs = document.getElementById('maTable').getElementsByTagName('td'); 
        if(!lTDs) return; 
        for(var iI = 0; iI < lTDs.length; ++iI){    // Pour chaque TD... 
            var eTD = lTDs[iI]; 
            // addEventListener 
            addEvent(eTD, 'click', oTest._ClickGauche, false); 
            addEvent(eTD, 'contextmenu', oTest._ClickDroit, false); 
        } 
    }, 
     
    // Affichage Clic Gauche 
    _ClickGauche: function(event) 
    { 
        var oElem = event.target || window.event.srcElement; 
        alert("Clic Gauche sur " + oElem.id); 
    }, 
     
    // Affichage Clic Droit 
    _ClickDroit: function(event) 
    { 
        var oElem = event.target || window.event.srcElement; 
        alert("Clic Droit sur " + oElem.id); 
        if (event.preventDefault) {  
          event.preventDefault();  
        }  
        event.returnValue = false; 
    } 
}; 
 
if(document.getElementById && document.getElementsByTagName) addEvent(window, 'load', oTest._Init, false); 
 
</script> 
</head> 
<body> 
<table id="maTable"> 
    <tr> 
        <td id="td1_1">Bla Bla 1_1</td> 
        <td id="td1_2">Bla Bla 1_2</td> 
        <td id="td1_3">Bla Bla 1_3</td> 
    </tr> 
    <tr> 
        <td id="td2_1">Bla Bla 2_1</td> 
        <td id="td2_2">Bla Bla 2_2</td> 
        <td id="td2_3">Bla Bla 2_3</td> 
    </tr> 
</table> 
</body> 
</html>


ça ne fonctionne pas, j'ai pourtant mis l'ID de mon tableau Smiley confus

Qu'en penses-tu ?

Encore merci pour tout.

beegees
Pages :