[Javascript] Pb: DOM et IE (ajout d'elements)

Résolu
knoodrake Messages postés 3 Statut Membre -  
 MSbart29 -
Bonjour.

Petit ( mais important) probleme avec JavaScript et.. (surprise) .. IE !

Description:
J'ai un tableau, dans lequel je veu rajouter dynamiquement une nouvelle ligne lorsqu'un certain lien est cliqué.
La nouvelle ligne comprend 2 "<input type='text'>" ayant un id différent a chaque ligne.
La chose marche très bien avec Firefox, mais pas internet Explorer.
Ce dernier m'indique lorsque je clique sur le chti bouton "erreur sur la page" qu'il y a une "erreur de syntaxe". Helas, impossible de retrouver la-dite erreur puisqu'il ne m'indique ou c'est sans tenir compte des inclusions etc..
Je rajoute que la console JavaScript de FFx ne m'indique rien, même pas un warning.

Le HTML: 
<table id='table_2' style='display:none;'>
<tr><td>Nom</td><td>Valeur</td></tr>
<tr>
	<td colspan='2' align='center'><a href='#' onclick='one_more_ligne();'>[+] Une de plus</a></td>
</tr>
<tr>
	<td><input type='text' id='oo_nom_1' name='oo_nom'/></td>
	<td><input type='text' id='oo_valeur_1' name='oo_valeur'/></td>
</tr>
</table>
<button onclick='add_opt();' id='submit' disabled>Rajouter</button>


et le JavaScript: ( qui rajoute donc un nouveau TR avec dedans 2 TD comprenant chaquun un input, comme les 2 de départ (cf. le 6 et 7emes lignes du HTML ci-dessu )) 
var count = 1;
function one_more_ligne () {
	count++;
	var tr = document.createElement("TR");
	var td_1 = document.createElement("TD");
	var td_2 = document.createElement("TD");
	var inp1 = document.createElement("INPUT");
	var inp2 = document.createElement("INPUT");

	inp1.name="oo_nom";	inp2.name="oo_valeur";
	inp1.type="text";	inp2.type="text";
	inp1.id="oo_nom_"+count;
	inp2.id="oo_valeur_"+count;

	td_1.appendChild(inp1);	td_2.appendChild(inp2);
	tr.appendChild(td_1); 	tr.appendChild(td_2);

	byId("table_2").appendChild(tr);
}

Ah oui, et je précise avant qu'on ne me fasse la remarque pour rien que ById est bien définie quelque part plus tôt dans le fichier js.
PS: ça ne pourrait pas venir d'une erreur autre par dans la page qui bloquerai la suite par hazard ?

Si vous avez des idées, des solutions, des voies d'exploration, n'importe quoi .. :-)

Merci par avance.
Cordialement, Damien.

6 réponses

Réponse 1 / 6
Utilisateur anonyme
 
Salut!

Ajoute la balise <TBODY> dans ta table et le problème sera résolu.

Voir le code ci-dessous: 

<html>
	<head>
		<script language="javascript" type="text/javascript">
			var count = 1;
			
			function one_more_ligne () {
				count++;
				var tr = document.createElement("TR");
				var td_1 = document.createElement("TD");
				var td_2 = document.createElement("TD");
				var inp1 = document.createElement("INPUT");
				var inp2 = document.createElement("INPUT");

				inp1.name="oo_nom";	inp2.name="oo_valeur";
				inp1.type="text";	inp2.type="text";
				inp1.id="oo_nom_"+count;
				inp2.id="oo_valeur_"+count;

				td_1.appendChild(inp1);
				td_2.appendChild(inp2);
				tr.appendChild(td_1);
				tr.appendChild(td_2);
				byId("table_2").getElementsByTagName('tbody')[0].appendChild(tr);
			}

			function byId(elmId){
				var elm = document.getElementById(elmId);
				if(elm==null)
					elm = document.getElementsByName(elmId)[0];
				alert(elm.innerHTML);
				return elm;
			}
		</script>
	</head>
	
	<body>
		<table id="table_2" name="table_2">
			<tbody>
				<tr>
					<td>Nom</td>
					<td>Valeur</td></tr>
				<tr>
					<td colspan="2" align="center"><a href="#" onclick="one_more_ligne();">[+] Une de plus</a></td>
				</tr>
				<tr>
					<td><input type="text" id="oo_nom_1" name="oo_nom"/></td>
					<td><input type="text" id="oo_valeur_1" name="oo_valeur"/></td>
				</tr>
			</tbody>
		</table>
		<button onclick="add_opt();" id="submit" disabled>Rajouter</button>
	</body>
</html>


;-)
HackTrack
3
knoodrake Messages postés 3 Statut Membre 1
 
je vais essayer ça merci beaucoup :)

Edit: Si seulement ça avait pu marcher.. :-(
0
arsonik
 
Un grand merci tu m'as aussi sauvé des heures de recherche :)
0
Réponse 2 / 6
altemis
 
autrement, ca marche dans les deux navigateur si tu place l'id dans un <tbody> ;
cordialement,
2
MSbart29
 
Testé et approuvé, merci beaucoup !
0
Réponse 3 / 6
fodjio Messages postés 17 Statut Membre 5
 
Merci mille fois pour l'astuce du Tbody !

Je me suis bien arraché les cheveux sur ce problème ^^

Non mais vraiment QUELLE DAUBE cet IE !!!

À croire que Microsoft fait tout pour pourrir la vie des webmasters !
2
Réponse 4 / 6
altemis
 
il faut pour que ca marche sous IE que tu mette l' ID dans le TR

<table style='display:none;'>
<tr id='table_2' ><td>Nom</td><td>Valeur</td></tr>
<tr>

ca marche sous IE mais plus sous FF , a toi d adapter maintenant le code afin d avoir un ID différent pour Table et pour TR et d'appeller le bon pour IE et FF

++
1

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
knoodrake Messages postés 3 Statut Membre 1
 
merci beaucoup altemis.
1
Réponse 6 / 6
entrope
 
Merci pour le <tbody>, ca vient de me sauver la vie :)

Cheers
1

Discussions similaires

java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
Faire un echo dans un script JS
CorentinRoche -
CorentinRoche -

6 réponses
javascript:void(0);
nano -
JCVD -

18 réponses
a javascript error occurred in the main process
Kytsu1241 -
lolomusic667 -

1 réponse