Discussion :

[cedrick21]

Bonjour à tous,

lors d'un clic sur un bouton je rajoute une ligne contenant des éléments dans un <table>

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
var	nbChamp	=	0;
 
function addProduitPanier()
{
	nbChamp++;
 
	var table 		= 	document.getElementById('tableCommande');
	var lignetr 	= 	document.createElement("tr");
	var lignetd1	=	document.createElement("td");
	var lignetd2	=	document.createElement("td");
	var lignetd3	=	document.createElement("td");
	var lignetd4	=	document.createElement("td");
	var lignetd5	=	document.createElement("td");
	var lignetd6	=	document.createElement("td");
 
	var inputRef	=	document.createElement("input");
	var inputQte	=	document.createElement("input");
	var inputPts	=	document.createElement("input");
 
	var divLibelle	=	document.createElement("div");
 
	var spanEspace	=	document.createElement("span");
 
	var lienSuppr	=	document.createElement("a");
	var imgSuppr	=	document.createElement("img");
 
	/****************************************************************************/
 
	lignetr.className				=	'ligne_1';
	lignetd1.style.border			=	'none';
	lignetd2.style.border			=	'none';
	lignetd3.style.border			=	'none';
	lignetd4.style.border			=	'none';
	lignetd5.style.border			=	'none';
	lignetd6.style.border			=	'none';
	inputRef.style.width			=	'50px';
	inputQte.style.width			=	'50px';
	lignetd1.style.verticalAlign	=	'top';
	lignetd2.style.verticalAlign	=	'top';
	lignetd3.style.verticalAlign	=	'top';
	lignetd4.style.verticalAlign	=	'top';
	lignetd5.style.verticalAlign	=	'top';
	lignetd6.style.verticalAlign	=	'top';
 
	inputPts.type			=	'hidden';
	inputPts.id				=	'points_'+nbChamp;
 
	lignetd2.className		=	'champs2';
	lignetd6.className		=	'champs2';
 
	lienSuppr.href			=	'#';
	lienSuppr.id			=	'lienSuppr_'+nbChamp;
	imgSuppr.src			=	'template/img/cancel.jpg';
 
	inputRef.name			=	'kdo[]';
	inputQte.name			=	'qte[]';
 
	lignetr.id				=	'lignetr_'+nbChamp;
	inputRef.id				=	'kdo_'+nbChamp;
	inputQte.id				=	'qte_'+nbChamp;
	divLibelle.id			=	'libelleKdo_'+nbChamp;
 
	inputRef.onkeyup		=	function(){contour(this.id, this.value);};
	inputQte.onkeyup		=	function(){contour2(this.id);};	
	lienSuppr.onclick		=	function(){deleteLigne(this.id);};
 
	lignetd1.innerHTML		=	'Réf Stimactiv :';
	lignetd3.innerHTML		=	'Libellé :';
	lignetd5.innerHTML		=	'Qté :';
 
	spanEspace.innerHTML	=	' ';
 
	divLibelle.style.width		=	'175px';
	divLibelle.style.textAlign	=	'left';
	divLibelle.style.color		=	'#555555';
	divLibelle.style.fontStyle	=	'italic';
 
	/****************************************************************************/
	//Ajout des éléments les uns dans les autres
 
	lienSuppr.appendChild(imgSuppr);
 
	lignetd2.appendChild(inputRef);
	lignetd4.appendChild(divLibelle);
	lignetd6.appendChild(inputQte);
	lignetd6.appendChild(spanEspace);
	lignetd6.appendChild(lienSuppr);
	lignetd6.appendChild(inputPts);
 
	lignetr.appendChild(lignetd1); 
	lignetr.appendChild(lignetd2); 
	lignetr.appendChild(lignetd3); 
	lignetr.appendChild(lignetd4); 
	lignetr.appendChild(lignetd5); 
	lignetr.appendChild(lignetd6);
	table.appendChild(lignetr); 
}

le soucis c'est que ça fonctionne bien sous FF, Safari, IE8 mais pas IE6 et IE7.
Mon client, qui va utiliser cette fonctionnalité, travail sous IE6 ... et ne peut pas en changer (dixit son service informatique)

Auriez-vous une idée, à la vue du code, de ce qui pourrait empêcher la création de ligne en DOM sur IE6 et 7

[SpaceFrog]

il faut faire l'appendChild dans le tbody de la balise table

Code :

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

table.getElementsByTagName('tbody')[0].appendChild(lignetr);

[cedrick21]

ça fonctionne, merci beaucoup !

Apparemment IE6 et 7 sont très attachés au <tbody> alors que les autres non.
C'est peut-être pas plus mal dans un sens !

[Gatsu35]

ça fonctionne, merci beaucoup !

Apparemment IE6 et 7 sont très attachés au <tbody> alors que les autres non.
C'est peut-être pas plus mal dans un sens !

les lignes d'un tableau se trouve obligatoirement soit dans un tbody, tfoot ou thead.

Pour spacefrog, petit rappel au niveau des Table pour accéder au tbody, il est plus simple de faire

monTableau.tBodies[0]