insertion de cellules dans un tableau

Version imprimable

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:

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"> </td>
J'ai commencé avec le code qui suit mais je calle.
Code:

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

07/11/2009, 08h22
Bovino
Citation:

Envoyé par Mengué georges

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:

newcell.style.backgroundColor = 'red';

Citation:

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

Code:

newcell.id = 'tab';

Citation:

- des Fct onmouseover et onDblclick
Code:

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

Merci pour la réponse.

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

Code:

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 ?

07/11/2009, 13h17
Bovino

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

Code:

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:

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

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

Code:

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

Ok merci
mais tjs pb

Code:

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.

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:

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

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

Code:

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);
        }
	}