innerHTML ne fonctionnant pas avec IE

**beegees** · 21/02/2010, 19h32

Bonsoir,

J'ai un table qui contient plusieurs tbody.

Un de ces tbody a l'id "co_author"

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<tbody id="co_author">

Dans ce Tobdy, j'aimerais ins�rer 3 zones de textes, j'appelle donc sur le clic d'un bouton une fonction nomm�e Add_Co_Author.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<td><input type="button" value="Add CO-AUTHOR" onClick="Add_Co_Author();"></td>

Voici le code de ma fonction :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
function Add_Co_Author()
{
	if(global_numero_auteur < 13)
	{
		document.getElementById('co_author').innerHTML+= '<tr><td class="important">CO-AUTHOR '+global_numero_auteur+'</td></tr><tr><td>FIRST NAME<span class="asterix">*</span></td><td align="left"><input type="text" size="50"></td></tr><tr><td>LAST NAME<span class="asterix">*</span></td><td align="left"><input type="text" size="50"></td></tr><tr><td>INSTITUTION/AFFILIATION<span class="asterix">*</span></td><td align="left"><input type="text" size="50" onfocus="this.style.backgroundColor=\'yellow\'" onblur="this.style.backgroundColor=\'white\'"></td></tr>';
	}
 
	global_numero_auteur+=1;
}

J'arrive dans la fonction, global_numero_auteur vaut 4 quand j'arrive dans la fonction (je l'ai v�rifi� par une alerte).

Le probl�me doit venir du innerHTML.

Auriez-vous une autre solution fonctionnant avec IE ?

Edit :

J'ai aussi test� ceci mais sans succ�s :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
function Add_Co_Author()
{
	contenu_precedent = new String(document.getElementById('co_author').innerHTML);
 
	//alert(global_numero_auteur);
	if(global_numero_auteur < 13)
	{
		document.getElementById('co_author').innerHTML = contenu_precedent.concat('<tr><td class="important">CO-AUTHOR '+global_numero_auteur+'</td></tr><tr><td>FIRST NAME<span class="asterix">*</span></td><td align="left"><input type="text" size="50"></td></tr><tr><td>LAST NAME<span class="asterix">*</span></td><td align="left"><input type="text" size="50"></td></tr><tr><td>INSTITUTION/AFFILIATION<span class="asterix">*</span></td><td align="left"><input type="text" size="50" onfocus="this.style.backgroundColor=\'yellow\'" onblur="this.style.backgroundColor=\'white\'"></td></tr>');
	}
	global_numero_auteur= global_numero_auteur+1;
}

En tout cas, avec Firefox, cela fonctionne parfaitement.

Merci d'avance.

beegees

**javatwister** · 21/02/2010, 20h50

un ptit parseInt, pour v�rifier que ta variable est bien num�rique?

**AcidLines** · 21/02/2010, 23h25

Cela ne viendrait pas du "+" a droite de ton innerHTML ? :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

document.getElementById('co_author').innerHTML+=...

**Gatsu35** · 22/02/2010, 09h22

<TABLE>.innerHTML
<TBODY>.innerHTML
<SELECT>.innerHTML
<TR>.innerHTLM
provoquent des erreur sous IE, c'est con, mais c'est comme �a.

**beegees** · 22/02/2010, 10h28

Envoy� par javatwister

un ptit parseInt, pour v�rifier que ta variable est bien num�rique?

Salut,

J'ai fait une alerte typeof et il m'indique "number".

Le probl�me ne viendrait donc pas de l�.

Encore merci.

beegees

Envoy� par AcidLines

Cela ne viendrait pas du "+" a droite de ton innerHTML ? :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

document.getElementById('co_author').innerHTML+=...

Salut,

Avec ou sans +, �a ne fonctionne pas.

J'ai essay� :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

document.getElementById('co_author').innerHTML ='teste';

Sans succ�s.

Merci pour ton aide.

beegees

Envoy� par Gatsu35

<TABLE>.innerHTML
<TBODY>.innerHTML
<SELECT>.innerHTML
<TR>.innerHTLM
provoquent des erreur sous IE, c'est con, mais c'est comme �a.

Salut,

Merci pour ta r�ponse.

Je dois alors utiliser le DOM (cr�ation de TR, TD...) ? ou as-tu une autre solution ?

Encore merci

beegees

**le_chomeur** · 22/02/2010, 10h34

Salut Beegees ;-)

je ne crois pas qu'il puisse il y avoir plusieurs tbody dans un tableau :-/

aurais tu un code un peu plus complet de ce que tu souhaites faire ?

**Bovino** · 22/02/2010, 10h36

Envoy� par le_chomeur

je ne crois pas qu'il puisse il y avoir plusieurs tbody dans un tableau :-/

Si, c'est possible.
Ce sont les thead et tfoot qui doivent �tre uniques

**beegees** · 22/02/2010, 10h37

Envoy� par le_chomeur

Salut Beegees ;-)

je ne crois pas qu'il puisse il y avoir plusieurs tbody dans un tableau :-/

aurais tu un code un peu plus complet de ce que tu souhaites faire ?

Salut Chomy,

Merci pour ta r�ponse.

Voici ce que je devrais obtenir :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
<tr>
			<td class="important">CO-AUTHOR 1</td>
		</tr>
		<tr>
			<td>FIRST NAME<span class="asterix">*</span></td><td align="left" class="td_abstracts"><input type="text" size="50"	onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'"></td>
		</tr>
		<tr>
			<td>LAST NAME<span class="asterix">*</span></td><td align="left" class="td_abstracts"><input type="text" size="50" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'"></td>
		</tr>
		<tr>
			<td>INSTITUTION/AFFILIATION<span class="asterix">*</span></td><td align="left"><input type="text" size="50" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'"></td>
		</tr>

Encore merci � toi.

beegees

**beegees** · 22/02/2010, 10h38

Envoy� par Bovino

Si, c'est possible.
Ce sont les thead et tfoot qui doivent �tre uniques

Merci pour cette confirmation Bovino

beegees

**Gatsu35** · 22/02/2010, 11h28

Bon pour r�pondre � tout �a :
dans un <table> : thead et tfoot sont uniques, et on peut avoir plusieurs tbody.

comme je l'ai dit les innerHTML p�tent sous IE

le seul pb c'est qu'il faut passer par le dom, mais tout en conservant la possibilit� de ne pas avoir � trop taper sur le code existant.

donc je te propose :
au lieu de faire :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
 
if(global_numero_auteur < 13)
	{
		document.getElementById('co_author').innerHTML+= '<tr><td class="important">CO-AUTHOR '+global_numero_auteur+'</td></tr><tr><td>FIRST NAME<span class="asterix">*</span></td><td align="left"><input type="text" size="50"></td></tr><tr><td>LAST NAME<span class="asterix">*</span></td><td align="left"><input type="text" size="50"></td></tr><tr><td>INSTITUTION/AFFILIATION<span class="asterix">*</span></td><td align="left"><input type="text" size="50" onfocus="this.style.backgroundColor=\'yellow\'" onblur="this.style.backgroundColor=\'white\'"></td></tr>';
	}

tu fais

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
 
addHTML(document.getElementById('co_author'), '<tr><td class="important">CO-AUTHOR '+global_numero_auteur+'</td></tr><tr><td>FIRST NAME<span class="asterix">*</span></td><td align="left"><input type="text" size="50"></td></tr><tr><td>LAST NAME<span class="asterix">*</span></td><td align="left"><input type="text" size="50"></td></tr><tr><td>INSTITUTION/AFFILIATION<span class="asterix">*</span></td><td align="left"><input type="text" size="50" onfocus="this.style.backgroundColor=\'yellow\'" onblur="this.style.backgroundColor=\'white\'"></td></tr>');

En utilisant ces deux fonctions

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
 
function setInnerHTML(elm, str) {
	try {
		elm.innerHTML = str;
	} catch(e) {
		var div = document.createElement('div');
		div.innerHTML = str;
		//vide elm
		while(elm.firstChild) {
			elm.removeChild(elm.firstChild);
		}
		//add child from div to the element
		while(div.firstChild) {
			elm.appendChild(div.firstChild);
		}
	}	
}
function addHTML(elm, str) {
	var html = elm.innerHTML;
	setInnerHTML(elm, html + str);
}

**SpaceFrog** · 22/02/2010, 11h39

dans un array : thead et tfoot sont uniques, et on peut avoir plusieurs tbody.

y'a des thead des tbody et tfoot dans des arrays ??

table != array

**le_chomeur** · 22/02/2010, 11h46

je ne crois pas qu'il puisse il y avoir plusieurs tbody dans un tableau :-/

je n'en suis donc pas sur

Bon sinon je ne pense pas que le probl�me vienne de innerHTML mais plut�t de la string pass� en param�tre...

Beegees , peux tu fournir en pi�ce jointe un exemple complet ?

**beegees** · 22/02/2010, 11h46

Salut et merci pour ta r�ponse Gatsu35,

Vraiment tr�s int�ressant.

Si je comprends bien, au moment o� il rencontre une erreur, il cr�e le table avec le DOM ?

Voici ce que �a donne :

Voir image attach�e

CO-AUTHOR 4FIRST NAME* sont sur la m�me ligne, penses-tu que l'on peut r�gler ce probl�me ?

Le plus important serait d'aligner les input text.

Encore merci pour ce tr�s beau code

beegees

**Gatsu35** · 22/02/2010, 11h47

Envoy� par le_chomeur

Bon sinon je ne pense pas que le probl�me vienne de innerHTML mais plut�t de la string pass� en param�tre...

le pb vient de innerHTML, pour avoir d�j� eu � faire � ce pb durant les 3 dernieres ann�es au moins 20 ou 30 fois

innerHTML fait p�ter une erreur sous IE quand tu essaye de le modifier sur un �l�ment tel que : table, select, tr, tfoot, tbody, thead

doit y avoir d'autres �l�ments

**SpaceFrog** · 22/02/2010, 11h55

D'ou ma m�fiance f�rocement ancr�e d'utiliser le innerHTML pour ajouter des �l�ments dynamiqueemnt au pied de biche dans une page HTML.

L'utilisation du DOM est certes plus lourde, mais au moins �pr�s il n'y a pas de mauvaises surprises. Les navigateurs reconnaissent leurs petits !