Bug taille liste déroulante et IE

Bonjour,
je rencontre une difficulté en utilisant du javascript/ajax sous IE.
J'ai un tableau auquel je veux ajouter/enlever dynamiquement des lignes.
A l'affichage de la page, lorsque l'on ajoute une ligne au tableau, l'affichage ne pose pas de problème (la taille de la liste déroulante est correcte).
Mais, lorsque je supprime la ligne et que je la réinsère, la taille de la liste n'est pas celle attendue.
(Le problème ne se pose pas sous firefox où la taille de la liste est correcte).

Dans la fonction addProduit, j'ai également essayé de rajouter explicitement les largeurs des colonnes en faisant : newCell.width = '...%'; mais cela ne m'a pas permis de résoudre le problème.

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
 
// le bout de code d'affichage de la JSP
 
<table id="tblProduits" border="0" cellpadding="0" cellspacing="0" width="95%" style="margin-top : 0;" >
	<tr>
		<td width="10%" class="header_tableau"><bean:message key="EffectuerSaisieForm.refIdExt"/></td>
		<td width="20%" class="header_tableau"><bean:message key="EffectuerSaisieForm.refLibelle"/></td>
		<td width="15%" class="header_tableau"><bean:message key="EffectuerSaisieForm.stkQuantite"/></td>
		<td width="15%" class="header_tableau"><bean:message key="EffectuerSaisieForm.stkConsomme"/></td>
		<td width="15%" class="header_tableau"><bean:message key="EffectuerSaisieForm.stkRestant"/></td>
		<td width="15%" class="header_tableau"><bean:message key="EffectuerSaisieForm.valeur"/></td>
		<td width="10%" class="header_tableau">&nbsp;</td>
	</tr>		
	<tr onmouseover="this.bgColor='#EBEBEB'" onmouseout="this.bgColor='#E6F5FE'" bgcolor="#E6F5FE">
		<td width="10%" class="lignePaire_tableau"><html:text property="refIdExt" styleId="refIdExt" styleClass="inputFormulaire" size="7" maxlength="30" onchange="listeReferences();" disabled="true" /></td>
		<td width="20%" class="lignePaire_tableau">
			<select name="refLibelle" id="refLibelle" tabindex="-1" onchange="changerVl();">
				<option value=""></option>
			</select>
		</td>
		<td width="15%" class="lignePaire_tableau">&nbsp;</td>
		<td width="15%" class="lignePaire_tableau"><html:text property="stkConsomme" styleId="stkConsomme" styleClass="inputFormulaire" size="5" maxlength="10" /></td>
		<td width="15%" class="lignePaire_tableau">&nbsp;</td>
		<td width="15%" class="lignePaire_tableau">&nbsp;</td>
		<td width="10%" class="lignePaire_tableauIco"><a href="javascript:void(0)" onClick="javascript:addProduit()">
			<img src="../../../images/picto_plus.gif" alt="Ajouter le produit" border="0" /></a>
		</td>
	</tr>
</table>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
// Suppression de la ligne (javascript)
function suppProduit(idLigneASupprimer, numLigne) {
 
	...
 
	//suppression de la ligne et de la suivante (ligne blanche)
	document.getElementById('tblProduits').deleteRow(numLigne);
	document.getElementById('tblProduits').deleteRow(numLigne);
 
	...
}

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
// ajout d'une ligne (javascript)
function addProduit() {
 
	...
 
	//Ajout d'une ligne au tableau (en fin de tableau)
	var newRow = document.getElementById('tblProduits').insertRow(nbLignes);
	newRow.className = 'lignePaire_tableau';
	newRow.bgColor = '#e6f5fe';
	newRow.onmouseover = new Function( "this.bgColor='#EBEBEB'");
	newRow.onmouseout=new Function( "this.bgColor='#E6F5FE'");
	var newCell = newRow.insertCell(0);
	newCell.className = 'lignePaire_tableau';
	newCell.innerHTML = refCom;
	newCell = newRow.insertCell(1);
	newCell.className = 'lignePaire_tableau';
	newCell.innerHTML = libelle;
	newCell = newRow.insertCell(2);
	newCell.className = 'lignePaire_tableau';
	newCell.innerHTML = qtStock;
	newCell = newRow.insertCell(3);
	newCell.className = 'lignePaire_tableau';
	newCell.innerHTML = qtConsommee;
	newCell = newRow.insertCell(4);
	newCell.className = 'lignePaire_tableau';
	newCell.innerHTML = qteApres;
	newCell = newRow.insertCell(5);
	newCell.className = 'lignePaire_tableau';
	newCell.innerHTML = valeur;
	newCell = newRow.insertCell(6);
	newCell.className = 'lignePaire_tableauIco';
	newCell.innerHTML = '<a href="javascript:void(0)" onClick="javascript:if(confirm(\'Etes vous sûr de vouloir supprimer cette ligne ?\'))suppProduit(' + dernierIdLigne + ', this.parentNode.parentNode.rowIndex)"><img alt="Supprimer le produit" src="../../../images/picto_suppr.gif" border=0></a>';
 
	//ligne vide
	nbLignes = parseInt(nbLignes,10) + 1;
	//Ajout d'une ligne au tableau (en fin de tableau)
	newRow = document.getElementById('tblProduits').insertRow(nbLignes);
	newCell = newRow.insertCell(0);
	newCell.innerHTML = '&nbsp;';
	newCell.colSpan = '7';
 
	... 
 
	return;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
 
// ajax (dans action struts, java)
 
...
 
retour = "var o = null;\n";
retour = retour + "var s = document.forms[0].elements[\"sfId\"];\n";
retour = retour + "s.options.length = 0;\n";
retour = retour
		+ "s.options[s.options.length] = new Option(\"\",\"\");\n";
 
	for (Iterator it = sfs.iterator(); it.hasNext();) {
		SfBean sf = (SfBean) it.next();
		retour = retour + "s.options[s.options.length] = new Option(\""
				+ sf.getLibelle() + "\",\"" + sf.getId()+";"+sf.getActif()
				+ "\");\n";
	}
p_request.setAttribute("retour", retour);
 
...

1) Lorsque j'affiche le tableau pour la première fois, je ne rencontre pas de problème
2) je clique sur le bouton ajouter (croix verte)
3) je clique sur le bouton supprimer (croix rouge)
4) je veux ré-entrer le produit que je viens de supprimer, et là, le comportement est différent entre IE et Firefox

--> Image

Merci de m'indiquer si vous trouvez une erreur dans le code ou une piste de recherche.