Discussion :

[tavarlindar]

Bonjour,
Je bloque totalement sur un problème d'ajout de ligne à un tableau.

Habituellement, j'ai un bouton add qui fait appel à une fonction js qui rajoute des lignes au tableau considéré. Cette fonction crée les cellules nécessaires ainsi que leur contenu.

Or aujourd'hui je bloque totalement à cause de la nature de la cellule que je souhaite rajouter.

Pour mieux comprendre : voici une page de test une page de test faite à l'arrache et pour l'exemple.

Pourquoi je bloque ?
Habituellement, ma fonction de rajout de ligne crée chaque cellule du tableau avec son contenu puis fait appel à une fonction qui renumérote chaque champ.

Mais ici je souhaite utiliser un calendrier js. Habituellement, son utilisation ne me pose pas de problème, car je connais exactement le nombre de calendriers que ma page doit gérer. Or ici, ce n'est pas le cas, puisque l'utilisateur peut en ajouter autant de ligne qu'il veut et donc de calendrier.

Ici c'est la structure même du code qui me bloque :

exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 <input type="text" tabindex="" name="date_echeance_client2" id="date_echeance_client2" value="" size ="8" >
<script language="JavaScript" type="text/javascript">
<!--
/** Calendrier Date
				*/
function calendar2Callback(date, month, year)
			{
document.forms['reservation'].date_echeance_client2.value = date + '-' + month + '-' + year;
			}
calendar2 = new dynCalendar('calendar2', 'calendar2Callback');
//-->
</script>

Chaque champ input text destiné à recevoir la date est suivi d'un code JS qui permet d'afficher le calendrier et qui permet de l'utiliser.

Je bloque car je ne voit pas comment définir ma fonction de rajout de ligne de telle sorte qu'elle me rajoute la partie JS correspondant à mon calendrier.

Je sais faire :

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
 
function ajoutLigneAuTableauClient(num_tbody)
{
 
var tbl = document.getElementById('echeancier_client');
 
// ajout d'une ligne
var row = tbl.tBodies[num_tbody].insertRow(-1);
 
// Cellule 1 : Champ date + calendrier
	var newCell1 = row.insertCell(1);
	var dateEcheance = document.createElement('input');
	dateEcheance.setAttribute('type','text');
	dateEcheance.setAttribute('size','8');
	dateEcheance.setAttribute('name','date_echeance_client3');
	dateEcheance.setAttribute('value','');
	dateEcheance.setAttribute('id','date_echeance_client');
	newCell1.appendChild(dateEcheance );

mais je ne sais pas comment dire rajoute moi

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<script language="JavaScript" type="text/javascript">
			<!--
			/** Calendrier Date de depart
				*/
			function calendar2Callback(date, month, year)
			{
            document.forms['reservation'].date_echeance_client2.value = date + '-' + month + '-' + year;
			}
			calendar2 = new dynCalendar('calendar2', 'calendar2Callback');
			//-->
</script>

sachant que par la suite tout doit être renuméroter ....

A toute fin utile, j'utilise Dyncalendar , cliquez ici pour plus d'info

En espérant avoir exprimer le plus clairement possible mon problème je remercie par avance ceux et celles qui pourront m'aider.

Tavar

[Invité]

Bonjour,
As-tu essayé avec

Code :

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

1
2
3
4
5
6
7
8
 
var scrCalendar = createElement("script");
scrCalendar.setAttribute("type", "text/javascript");
scrCalendar.setAttribute("text", "<!--
/** Calendrier Date*/
function calendar3Callback(date, month, year){document.forms['reservation'].date_echeance_client3.value = date + '-' + month + '-' + year;};calendar3 = new dynCalendar('calendar3', 'calendar3Callback');
//-->");
newCell1.appendChild(scrCalendar);

Enfin, quelque chose de ce genre !

A+

[SpaceFrog]

plusieurs remarques ...

Code :

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

dateEcheance.setAttribute('name','date_echeance_client3');

cette ligne risque fort de te poser un problème... on ne peut pas ajouter de façon dynamique un name... Il n'est pas ensuite reconnu par le DOM sous IE ...
Cf cette article : http://www.developpez.net/forums/d53...ynamique-form/

ensuite tu devras ajouter un onclick à l'input de sorte qu'il declencher la calendrier non ??? en passant en paramètre à la fonction l'id de l'input à remplir ...

[tavarlindar]

merci jlmag, mais cela ne fonctionne pas du tout.

Personne n 'a d'idée ????

[SpaceFrog]

heu si cf. ci dessus ...

[Invité]

Bonjour SpaceFrog,

Peux-tu être plus explicite, stp.

Merci

[SpaceFrog]

Un petit exemple de creation d'objet avec attribution d'appel de fonction faisant appel à l'objet cliqué ...

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
25
26
27
28
29
30
31
32
33
34
35
 
<html>
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 
<title>Nouvelle page 1</title>
<script type='text/javascript'>
var indexLine=0
function addLine(){
var newLine=document.createElement('div');
newLine.id=indexLine++;
newLine.style.width='100%';
newLine.style.height='20px';
newLine.innerHTML=" ligne nr "+indexLine;
newLine.style.border="solid 2px black";
newLine.onclick=function(){colorLigne(this)}
document.body.appendChild(newLine)
}
 
colors=new Array("green","red","blue","yellow","pink");
function colorLigne(ligne){
col=parseInt(ligne.id)%5;
alert (col)
ligne.style.backgroundColor=colors[col]
}
 
</script>
</head>
 
<body>
 <input type="button" onclick="addLine()" value='ajouter' />
</body>
 
</html>

[tavarlindar]

SpaceFrog,

Sans je dois dire merci ... mais dans le cas présent comment le traduis-tu ?

Oh sans doute me diras-tu, cherches .... je t'ai donné la piste.
Sauf que quand je rentre le soir je suis claqué, et je préfère qu'on me donne à manger du poisson que d'aller le pêcher (apprendre).

Si tu pouvais adapter ton savoir faire directement à ma problèmatique ce serait super, ensuite je serais capable de généraliser.

Par avance merci.

Je précise que tu m'as déjà bien aisé par le passé, donc encore merci pour les autres fois et j'espère que tu feras un petit effort pour m'aider plus précisément pour cette fois-ci.

Bien à toi

Tavar

[SpaceFrog]

J'aime pas le poisson ...
Mais les galette Bretonnes oui !!!

Je te mets un peu plus sur la piste ...

Code :

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

1
2
3
4
5
function calendar2Callback(date, month, year, Cible)
			{
Cible.value = date + '-' + month + '-' + year;
			}
calendar2 = new dynCalendar('calendar2', 'calendar2Callback');

[tavarlindar]

ouh, sur la piste, ???

J'ai essayé de décodé ton code, mais je ne suis pas trop. Je ne parle pas de ton dernier poste mais de :

<title>Nouvelle page 1</title>
<script type='text/javascript'>
var indexLine=0
function addLine(){
var newLine=document.createElement('div');
newLine.id=indexLine++;
newLine.style.width='100%';
newLine.style.height='20px';
newLine.innerHTML=" ligne nr "+indexLine;
newLine.style.border="solid 2px black";
newLine.onclick=function(){colorLigne(this)}
document.body.appendChild(newLine)
}

colors=new Array("green","red","blue","yellow","pink");
function colorLigne(ligne){
col=parseInt(ligne.id)%5;
alert (col)
ligne.style.backgroundColor=colors[col]
}

</script>

j'imagine que tu remplaces newLine.onclick=function(){colorLigne(this)} par la fonction du calendrier, mais ...

[Invité]

Bonjour, un début de réponse (j'ai simplifié le tableau...) et il n'y a pas de onclick sur l'input!

index.html

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
 
<!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" />
<link rel="stylesheet" href="dynCalendar.css" type="text/css" media="screen">
<script src="browserSniffer.js" type="text/javascript" language="javascript"></script>
<script src="dynCalendar.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
 
function ajoutLigneAuTableauClient()
{
  var tbl = document.getElementById('echeancier_client');
  var nomNode = "";
  for (i=0; i<tbl.childNodes.length; i++) nomNode += "\n"+tbl.childNodes[i].nodeName;
  var tbd = tbl.tBodies[0];
  nbLignes = 0;
  for (i=0; i<tbd.childNodes.length; i++) {
        (tbd.childNodes[i].nodeName == "TR") ? nbLignes++:"";
  }
 
  // Création du TR
  var newTR = document.createElement("tr");
 
  // Création et insertion du 1er TD
  var newTD = document.createElement("td");
  LienSup = document.createElement('a');
  supTexte = document.createTextNode('delete');
  LienSup.appendChild(supTexte);
  LienSup.href = '#';
  LienSup.onclick = function() {deleteCurrentRow(this, num_tbody)};
  newTD.appendChild(LienSup);
  newTR.appendChild(newTD);
 
  // Création et insertion 2eme TD
  var newTD = document.createElement("td");
  newTD.id = 'td_date_echeance_client'+nbLignes;
  var html = '<input id="date_echeance_client'+nbLignes+'" type="text" size="8" name="date_echeance_client'+nbLignes+'" value="" onclick="" />'
  newTD.innerHTML = html;
  newTR.appendChild(newTD);
 
  // Création et insertion 3eme TD
  var newTD = document.createElement("td");
  var BkAccount = document.createTextNode('account'+nbLignes);
  newTD.appendChild(BkAccount );
  newTR.appendChild(newTD);
 
  // Création et insertion 4eme TD
  var newTD = document.createElement("td");
  var heading = document.createTextNode('lib'+nbLignes);
  newTD.appendChild(heading );
  newTR.appendChild(newTD);
 
  // Insertion du TR
  tbd.insertBefore(newTR, tbd.rows[nbLignes-1])
  newScript = document.createElement("script");
  newScript.type = "text/javascript";
  newScript.src = "scriptIE.js";
  tbd.rows[nbLignes-1].childNodes[1].appendChild(newScript);
 
//-->
}
 
</script>
<title></title>
</head>
<body>
 
 
<form class="formulaire_resa" name="reservation" id="reservation" method="post" action="Reservation.php ">
 
 
<table id="echeancier_client" style="text-align: left;" border="2" cellpadding="2" cellspacing="2">
	<thead>
		<tr>
			<td style="width: 36px;"></td>
			<td style="width: 100px;">Date</td>
			<td style="width: 51px;">Bank Account</td>
			<td style="width: 100px;">Heading</td>
		</tr>
	</thead>
 
	<tfoot>
		<tr>
			<td style="width: 36px;">Total</td>
			<td style="width: 100px;"></td>
			<td style="width: 51px;"></td>
			<td style="width: 100px;"></td>
		</tr>
	</tfoot>
 
	<tbody>
    <tr>
      <td style="width: 36px;"></td>
      <td style="width: 100px;"><input type="text" tabindex="" name="date_echeance_client1" id="date_echeance_client1" value="" size ="8"  onFocus="this.className='focus';" onBlur="this.className='normal';">
  	  <script language="JavaScript" type="text/javascript">
  			<!--
  			/** Calendrier Date de depart
  				*/
  			function calendar1Callback(date, month, year)
  			{
              document.forms['reservation'].date_echeance_client1.value = date + '-' + month + '-' + year;
  			}
  			calendar1 = new dynCalendar('calendar1', 'calendar1Callback');
  			//-->
  			</script>
 
  	  </td>
      <td style="width: 51px;">account1</td>
      <td style="width: 100px;">lib1</td>
    </tr>
 
    <tr>
      <td style="width: 36px;">Delete</td>
      <td style="width: 100px;"><input type="text" tabindex="" name="date_echeance_client2" id="date_echeance_client2" value="" size ="8" >
	  <script language="JavaScript" type="text/javascript">
			<!--
			/** Calendrier Date de depart
				*/
			function calendar2Callback(date, month, year)
			{
            document.forms['reservation'].date_echeance_client2.value = date + '-' + month + '-' + year;
			}
			calendar2 = new dynCalendar('calendar2', 'calendar2Callback');
			//-->
		</script>
 
	  </td>
      <td style="width: 51px;">account2</td>
      <td style="width: 100px;">lib2</td>
    </tr>
 
    <tr>
      <td style="width: 36px;"><input type="button" value="Add" onclick="ajoutLigneAuTableauClient();" /></td>
      <td style="width: 100px;"></td>
      <td style="width: 51px;"></td>
      <td style="width: 100px;"></td>
    </tr>
  </tbody>
</table>
</form>
</body>
</html>

Le fichier scriptIE.js

Code :

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

1
2
3
 
eval('calendar'+nbLignes+'Callback = new Function("date", "month", "year","document.forms[\'reservation\'].date_echeance_client'+nbLignes+'.value = date + \'-\' + month + \'-\' + year")');
eval('calendar'+nbLignes+' = new dynCalendar("calendar'+nbLignes+'", "calendar'+nbLignes+'Callback", "td_date_echeance_client'+nbLignes+'")');

Pour le script du calendrier 2 modifs (l'ajout de td recevant le calendrier 'idElem')
en début

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
 
	function dynCalendar(objName, callbackFunc, idElem)
	{
		/**
        * Properties
        */
		// Todays date
		this.today          = new Date();
		this.date           = this.today.getDate();
		this.month          = this.today.getMonth();
		this.year           = this.today.getFullYear();
 
		this.objName        = objName;
		this.callbackFunc   = callbackFunc;
		this.idElem         = idElem ? idElem : false;
		this.imagesPath     = arguments[3] ? arguments[3] : 'images/';
		this.layerID        = arguments[4] ? arguments[4] : 'dynCalendar_layer_' + dynCalendar_layers.length;

et la fonction dynCalendar_writeHTML

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
 
	function dynCalendar_writeHTML()
	{
		if (is_ie5up || is_nav6up || is_gecko) {
			//document.write('<a href="javascript: ' + this.objName + '.show()"><img src="' + this.imagesPath + 'dynCalendar.gif" border="0" width="16" height="16" /></a>');
			//document.write('<div class="dynCalendar" id="' + this.layerID + '" onmouseover="' + this.objName + '._mouseover(true)" onmouseout="' + this.objName + '._mouseover(false)"></div>');
 
            if (this.idElem) {
                  var oldInner = document.getElementById(this.idElem).innerHTML;
                  oldInner += '<a href="javascript: ' + this.objName + '.show()"><img src="' + this.imagesPath + 'dynCalendar.gif" border="0" width="16" height="16" /></a>';
                  oldInner += '<div class="dynCalendar" id="' + this.layerID + '" onmouseover="' + this.objName + '._mouseover(true)" onmouseout="' + this.objName + '._mouseover(false)"></div>';
                  document.getElementById(this.idElem).innerHTML = oldInner;
            }
            else {
               document.write('<a href="javascript: ' + this.objName + '.show()"><img src="' + this.imagesPath + 'dynCalendar.gif" border="0" width="16" height="16" /></a>');
	    document.write('<div class="dynCalendar" id="' + this.layerID + '" onmouseover="' + this.objName + '._mouseover(true)" onmouseout="' + this.objName + '._mouseover(false)"></div>');
            }
        }
	}

Cela fonctionne sous FF3 (enfin pas fait grand essais). Par contre sous IE7, IE7 plante lors de la création de la deuxième ligne...

A+

[tavarlindar]

jlmag : tout d'abord merci.

C'est une réponse de qualité.
J'ai lu pour tout dire en diagonal, car il se fait tard.
je vais l'étudier plus en détail demain. Si je comprends tu modifie les script js du calendrier ? Est-ce bien cela ?

Comme je constate que le sujet s'interpelle, pour info :
un lien plus qu'intéressant qui offre une solution.Solution que je n'utiliserai pas car je ne la comprends pas !

En tout cas merci et ne m'abandonne pas ... !
je vais analyser ta solution.

[Invité]

Bonjour,

En gros, ce que j'ai fais

Dans le fichier principal index.html, j'ai simplifié le tableau et un seul tbody.
La fonction ajoutLigneAuTableauClient(), crée le tr . Elle y inserre les cellules puis inserre dans le DOM le dit tr au-dessus de celui qui contient le bouton "Add", enfin elle y inserre le script contenu dans le fichier à part scriptIE.js. J'ai cru lire sur le web que cela était plus satisfaisant pour ne pas se facher avec IE ou FF.

Le script scriptIE crée la fonction (anonyme) de callback et une nouvelle instanciation de dynCalendar(). En fait, ce qui est fait lors de la création du document pour les 2ères lignes.
Mais là comme on modifie en live le document, document.write dans dynCalendar_writeHTML() fout le bordel. D'ou la modif ci-dessous.

Dans le fichier dynCalendar.js, j'ai modifié la fonction dynCalendar() pour qu'elle prenne en compte un paramètre supplémentaire (il peut ne pas être mis) qui est l'id du td qui recevra l'élément a et le div pour l'icone du calendrier. Dans ce même fichier, j'ai modifié dynCalendar_writeHTML() qui inserre le a et le div, si idElem, on inserre via innerHTML, sinon c'est la méthode du bourin document.write qui est utilisée.

Bon, c'est un élément de réponse, cela semble fonctionné sous FF3, mais sous IE7, ok pour la première création, après cela plante.

On verra demain.

A+

[Invité]

Bonjour,

jlmag : tout d'abord merci.

C'est une réponse de qualité.
J'ai lu pour tout dire en diagonal, car il se fait tard.
je vais l'étudier plus en détail demain. Si je comprends tu modifie les script js du calendrier ? Est-ce bien cela ?

Comme je constate que le sujet s'interpelle, pour info :
un lien plus qu'intéressant qui offre une solution.Solution que je n'utiliserai pas car je ne la comprends pas !

En tout cas merci et ne m'abandonne pas ... !
je vais analyser ta solution.

Utilise cet exemple, cela te facilitera la tache. S'il ya des choses qui te bloquent, n'hésites pas

A+

PS: pour ma version, c'est franchement de la bidouille!

[tavarlindar]

jlmag, j'ai finalement suivi ton conseil. Je me suis inspiré de la solution de mredkj.com.

Cependant je suis confronté à un bug que je n'arrive pas à résoudre.
Pour comprendre voici 2 pages de test.
Dans les 2 cas, je souhaite utiliser une image de calendrier plutôt qu'un bouton Calendrier.
Après recherche il semblerait qu'en fonction de la définition de l'entête HTML, cela fonctionne ou pas.


Page 2 de test.
Ici <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Page de test 2
Avec IE ou FF cela semble fonctionner.


Page 3 de test
avec <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Page de test 3

Avec IE cela semble fonctionner mais pas avec FF.
avec FF : msg d'erreur : date_echeance_client2 is not defined

Je bloque totalement. Etant donné que tout mon site de prod utilise

Code :

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

1
2
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

je ne souhaite pas changer d'entête.

[Invité]

Bonjour,

Ici :

Code :

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

onclick="toggleCalendar(date_echeance_client2);"

Je verais bien du :

Code :

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

onclick="toggleCalendar('date_echeance_client2');"

avec des ' donc, pareil avec le date_echeance_client1 !

Tu peux aussi utiliser:

Code :

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

<input type="image" name="date_echeance_client2" src="../images/dynCalendar.gif"  id="..." name="..." onclick="toggleCalendar('date_echeance_client2');"/>

A+

[tavarlindar]

Merci mais désolé j'avais déjà testé, cela ne fonctionne pas.

De plus qui dit input type= image correspond à un submit.


J'ai trouvé une alternative, mais je ne sais toujours pas pourquoi le code de la page 3 ne fonctionne pas.

Code :

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

1
2
 
 <button style="Background-color:white;" type="button" onClick="toggleCalendar(date_echeance_client2);"><img src="../images/dynCalendar.gif"></button>

[Invité]

Re,
Il faut, dans le onclick de l'image, donner l'objet INPUT contenant la date

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
    <tr>
      <td style="width: 36px;">Delete</td>
      <td style="width: 100px;">
        <input type="text" tabindex="" id="date_echeance_client2" name="date_echeance_client2" value="" size ="8"  onfocus="this.className='focus';" onblur="this.className='normal';" />
        <img src="../images/dynCalendar.gif" onclick="toggleCalendar(document.getElementById('date_echeance_client2'))" />
      </td>
      <td style="width: 51px;">account2</td>
      <td style="width: 100px;">lib2</td>
      <td style="width: 102px;"></td>
      <td style="width: 93px;"></td>
      <td style="width: 59px;"></td>
      <td style="width: 58px;"></td>
      <td style="width: 84px;"></td>
      <td style="width: 68px;"></td>
    </tr>

A+

Edit: attention aux valeurs entrées pour les dates (mm-jj-aaaa ou jj-mm-aaaa)
Edit 2 : visible ICI

[SpaceFrog]

J'ai bien un code avec attruibution dynamique de calendrier sur des inputs, mais j'ai peur que tu ne dise que c'est trop compliqué;

Alors j'ai simplifié au maximum le principe ...

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
25
26
27
<html>
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<script type='text/javascript'>
var InputCount=0
function addLine(){
var newInput =document.createElement('<input type="text" name="input_" id="input_'+InputCount+'" />');
newInput.readOnly=true;
InputCount++;
newInput.onclick=function(){remplir(this.id)};
document.body.appendChild(newInput);
}
 
function remplir(obj){
 document.getElementById(obj).value=prompt();
 }
 </script>
</head>
 
<body>
<input type='button' value='ajout' onclick='addLine()' />
 
</body>
 
</html>

il suffit d'attribuer la fonction sur le onclick en passant en paramètre l'id du champs ...

[tavarlindar]

Merci SpaceFlog d'abord,

mais Monsieur jlmag, votre code est génial, c'est exactement ce qu'il me faut, mais je ne pourrai pas dormir sans plus d'explication.

J'avais essayé un code analogue, mais qui bugger. Quand j'ai vu ton code, je me suis dit, bon à quoi bon, sans voir le lien ICI.

Je clique sur ICI et oh miracle son code fonctionne.

Super, mais pourquoi fonctionne-t-il ?
passons sur le

Code :

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

1
2
 
<img src="../images/dynCalendar.gif" onclick="toggleCalendar(document.getElementById('date_echeance_client1'))" />

c'est du statique.

Passons à la création de cellule :

Code :

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

1
2
3
4
5
 
 var btnCal = document.createElement('img');
	btnCal.src='images/dynCalendar.gif';
	btnCal.onclick = function() {toggleCalendar(dateEcheance)};
	newCell1.appendChild(btnCal);

je viens de comprendre .... toggleCalendar() prend en paramètre l'input contenant la date, comme tu l'as écrit. Eh ben, ce fut laborieux.

En tout cas , mille fois merci.
Vraiment merci.