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

Résolu

knoodrake Messages postés 3 Date d'inscription Statut Membre Dernière intervention -
MSbart29 - 17 oct. 2011 à 13:48

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.

Afficher la suite

A voir également:

[Javascript] Pb: DOM et IE (ajout d'elements)
Telecharger javascript - Télécharger - Langages
A javascript error occurred in the main process - Forum Handicap / Accessibilté
Erreur #125 javascript - Forum Mozilla Firefox
Afficher un tableau javascript en html ✓ - Forum Javascript
Javascript arrondi - Forum Javascript

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

knoodrake Messages postés 3 Date d'inscription Statut Membre Dernière intervention 1

je vais essayer ça merci beaucoup :)

Edit: Si seulement ça avait pu marcher.. :-(

arsonik

Un grand merci tu m'as aussi sauvé des heures de recherche :)

Réponse 2 / 6

altemis

autrement, ca marche dans les deux navigateur si tu place l'id dans un <tbody> ;
cordialement,

MSbart29

Testé et approuvé, merci beaucoup !

Réponse 3 / 6

fodjio Messages postés 16 Date d'inscription Statut Membre Dernière intervention 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 !

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

++

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

Posez votre question

Réponse 5 / 6

knoodrake Messages postés 3 Date d'inscription Statut Membre Dernière intervention 1

merci beaucoup altemis.

Réponse 6 / 6

entrope

Merci pour le <tbody>, ca vient de me sauver la vie :)

Cheers

Discussions similaires

java script error in the main process

Javascript Arrondi à 2 chiffres après la virgule

javascript:void(0);

Faire un echo dans un script JS

a javascript error occurred in the main process

Votre réponse

Discussions similaires