Discussion :

[Mengué georges]

Bonjour

Je suis sur un projet de planning de réservation en intranet. Compte tenu de la taille du tableau, je souhaiterai faire une mise à jour via AJAX et le DOM.
La mise à jour n'est à effectuer que sur les cellules: taille, couleur, txt ... voir exemple ci-dessous:

Code :

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

1
2
3
4
5
 
<td colspan="3" id="a3_11" tab="36|null*Rgt|31" style= "background:#ffff58" >Tlse</td>
<td id="a3_14" tab="|Chevauchement réservation Tlse/Pamier|x" style="background-color:red">ERR</td>
<td colspan="6" id="a3_15" tab="45|null*Sce com|35" style= "background:#10ffa4" >Pamier</td>
<td colspan="7" id="a3_27" tab="||x">&nbsp;</td>

J'ai commencé avec le code qui suit mais je calle.

Code :

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

1
2
3
4
5
6
 
var mytable=document.getElementById("planning_Nvx")
var newcell=mytable.rows[2].insertCell(-1)
	newcell.colSpan = 3;
	newcell.bgColor = 'red';
	newcell.innerHTML="New cell contents"

le changement de couleur ne marche pas
comment ajouter:
- les attributs et leurs paramètres (id et tab)
- des Fct onmouseover et onDblclick

Merci de votre aide

[Bovino]

le changement de couleur ne marche pas

Normal, tu confonds propriété JavaScript et attribut HTML.
JavaScript implémente comme propriétés des objets ElementHTML les attributs valables en HTML. Or bgColor n'est pas un attribut valide (déprécié), il n'y a donc pas de propriété associée. Tu peux soit passer par setAttribute soit (meilleure solution) utiliser la propriété style :

Code :

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

newcell.style.backgroundColor = 'red';

comment ajouter:
- les attributs et leurs paramètres (id et tab)

Code :

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

newcell.id = 'tab';

- des Fct onmouseover et onDblclick

Code :

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

1
2
3
4
5
6
newcell.onmouseover = function(){
...
};
newcell.ondblclick = function(){
...
};

[Mengué georges]

Merci pour la réponse.

A force de recherche je suis parti sur une autre alternative comme suit:

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
 
//efface la ligne
function effaceReservation(lgn){
	var planning = document.getElementById('planning_Nvx');
	var ligne = planning.rows.item(lgn);
	while(planning.rows[lgn].cells.length>10)
		{ligne.deleteCell(10);}
	insertReservations(lgn);	
		}
 
function insertReservations(lgn){
	var planning = document.getElementById('planning_Nvx');
	var ligne = planning.rows.item(lgn);
	td = document.createElement("td");
	td.setAttribute("id",lgn+"_11");
	td.setAttribute("colspan","3");
	td.setAttribute("style","background:#ffffff;color:red;");
	//td.addEventListener ("ondblclick", reserv_nvx(lgn+"_11"), false);
	text = document.createTextNode("txt");
	td.appendChild(text);
	ligne.appendChild(td);
	td.addEventListener ("ondblclick", reserv_nvx(lgn+"_11"), false);
	}

qui répondait aussi à mes attentes mais j'ai un bug:
le td.addEventListener ("ondblclick", reserv_nvx(lgn+"_11"), false); est exécuté dès que la cellule est ajoutée et la dblclick est inopérant ?

[Bovino]

Attention, addEventListener n'est pas valable pour IE (qui reconnait attachEvent) !
Sinon, lorsque tu affectes comme tu le fais :

Code :

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

td.addEventListener ("ondblclick", reserv_nvx(lgn+"_11"), false);

c'est le résultat de la fonction qui est attaché à l'événement, pas la fonction elle-même, c'est pour ça qu'elle est lancée dès le chargement.
Il faut soit passer directement le nom de la fonction :

Code :

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

td.addEventListener ("ondblclick", reserv_nvx, false);

mais du coup, tu ne peux pas affecter de paramètres, soit passer par une fonction anonyme :

Code :

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

td.addEventListener ("ondblclick", function(){reserv_nvx(lgn+"_11")}, false);

[Mengué georges]

Ok merci
mais tjs pb

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function insertReservations(lgn){
	var planning = document.getElementById('planning_Nvx');
	var ligne = planning.rows.item(lgn);
	td = document.createElement("td");
	td.setAttribute("id",lgn+"_11");
	td.setAttribute("colSpan","3");
	td.setAttribute("style","background:#ffffff;color:red;");
 
	text = document.createTextNode("txt");
	td.appendChild(text);
	ligne.appendChild(td);
	td.addEventListener ("ondblclick", function(){reserv_nvx(lgn+"_11")}, false);
	}

Sous ie il faut utiliser colSpan S majuscule.
le td.setAttribute("style" en rade sur ie
et l'addEventListener ne fonctionne pas ni sur ie ni sur ff.

[kimjoa]

salut!

comme là dit Bovino, addEventListener n'est pas compatible IE, de plus cette fonction contrairement a attachevent, accepte que les événements sans le préfixe on

De plus on passe une fonction , toi tu l'appliques

donc pour t'as fonction ca devriat donner un truc comme ca

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
 
function insertReservations(lgn){
	var planning = document.getElementById('planning_Nvx');
	var ligne = planning.rows.item(lgn);
	td = document.createElement("td");
	td.setAttribute("id",lgn+"_11");
	td.setAttribute("colspan","3");
	td.setAttribute("style","background:#ffffff;color:red;");
	//td.addEventListener ("ondblclick", reserv_nvx(lgn+"_11"), false);
	text = document.createTextNode("txt");
	td.appendChild(text);
	ligne.appendChild(td);
        function bind(){
            reserv_nvx(lgn +"_11");
        }
        if(td.addEventListener){
             td.addEventListener ("dblclick",bind, false);
        }else{
            td.attachEvent("ondblclick", bind);
        }
 
}

aucune idée si ca va marcher , juste pour t'orienter

bye

[Mengué georges]

Excellent et Merci
Ci-dessous le code compatible ie et ff pour ceux qui ne sont pas nés dedans.

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
function insertReservations(lgn){
	var planning = document.getElementById('planning_Nvx');
	var ligne = planning.rows.item(lgn);
	td = document.createElement("td");
	td.setAttribute("id",lgn+"_11");
	td.setAttribute("tab","36|null*Rgt|31");
	td.setAttribute("colSpan","3");
	if(!ie){
		td.setAttribute("style","background:#ffffff;color:red;");
	}else{
		td.style.backgroundColor ='#ffffff';}
	text = document.createTextNode("txt");
	td.appendChild(text);
	ligne.appendChild(td);
 
	function bind0(){reserv_nvx(lgn +"_11");}
	function bind1(){infoBulle(lgn +"_11");}
	function bind2(){infoBulle_hidden();}
 
        if(!ie){
             td.addEventListener ("dblclick", bind0, false);
             td.addEventListener ("mouseover",bind1, false);
             td.addEventListener ("mouseout",bind2, false);
        }else{
            td.attachEvent("ondblclick",  bind0);
            td.attachEvent("onmouseover", bind1);
            td.attachEvent("onmouseout",  bind2);
        }
	}