11548 sujets

JavaScript, DOM et API Web HTML5

Probleme innerHTML avec ie

bonjour,
bon ben c'est un truc tout con, j'ai fait un innerHTML sur un tableau.
sous FF ca marche sans probleme, par contre sous ie, imossible de le faire fonctionner.
Il me marque a chaque fois : erreur d'execution inconnue
qq'un a une idée ?
pour voir de vous meme, le code simplifié de mon truc :

<HTML>
<HEAD>
<TITLE>Essai</TITLE>


<SCRIPT language="javascript" type="text/javascript">
var max_var = 2;
function addVar() {
document.getElementById("tableau_par").innerHTML += '<tr align="center"><td><input size="4" type="text" name="participant'+max_var+'"> </td><td>texte</td></tr>';
++max_var;
}

</script>

</HEAD>
<BODY>


<table id="tableau_par" border="1">

<tr><td>Participant(s)</td><td>texte</td></tr>
<tr><td><input size='4' type='text' name='participant'></td> <td>texte</td></tr>


</table>

<input type='button' value='Plus' onclick='addVar()'>
</body>
</html>

et ce meme exemple est visible a cette adresse :
http://fabien79test.free.fr/essai/essai.html

help please
fabien79 a écrit :
bonjour,
bon ben c'est un truc tout con, j'ai fait un innerHTML sur un tableau.
sous FF ca marche sans probleme, par contre sous ie, imossible de le faire fonctionner.
Il me marque a chaque fois : erreur d'execution inconnue
qq'un a une idée ?
pour voir de vous meme, le code simplifié de mon truc :

...

et ce meme exemple est visible a cette adresse :
http://fabien79test.free.fr/essai/essai.html

help please


Bonjour,

en fait quand tu fais ton tableau en HTML, tel que tu l'as codé ici, IE et Firefox le transforme pour donner quelque chose genre :

<table>
	<tbody>
		<tr>
			<td>...</td>
			<td>...</td>
		</tr>
		...
	</tbody>
</table>

donc du coup toi, si tu cherches à concaténer cette ligne
<tr>...</tr>

à

<tbody>...</tbody>

ça va te donner le code HTML suivant

<table>
	<tbody>
		<tr>
			<td>...</td>
			<td>...</td>
		</tr>
		...
	</tbody>
	<tr>...</tr>
</table>

qui est donc incohérent pour Internet Explorer.

Voilà ce que tu peux faire :

<html>
	<head>
		<title>Essai</title>
		<script language="javascript" type="text/javascript">
			var max_var = 2;
			function addVar() {
				var trNode = document.createElement("tr");
				var tdNode = document.createElement("td");
				var inputNode = document.createElement("input");
				inputNode.size = "4";
				inputNode.type = "text";
				inputNode.name = "participant" + max_var;
				tdNode.appendChild(inputNode);
				trNode.appendChild(tdNode);
				tdNode = document.createElement("td");
				tdNode.appendChild(document.createTextNode("Texte"));
				trNode.appendChild(tdNode);
				document.getElementById("bodyTab").appendChild(trNode);
				++max_var;
			}
		</script>

	</head>
	<body>
		<table id="tableau_par" border="1">
			<tbody id="bodyTab">
				<tr><td>Participant(s)</td><td>texte</td></tr>
				<tr><td><input size='4' type='text' name='participant'></td> <td>texte</td></tr>
			</tbody>
		</table>
		<input type='button' value='Plus' onclick='addVar()'>
	</body>
</html>

En plus tant qu'à utiliser des standards DOM c'est bien Smiley cligne
innerHTML n'est pas un standard.

Voilà, bonne journée

Cordialement,
Flavien
Genial,
merci enormement,
je vais essayer de me debrouiller avec tout ca!!
Modifié par fabien79 (29 Jun 2006 - 13:55)
Sujet clos
Aller à