OVH Cloud OVH Cloud

pb createElement("INPUT") sous IE

4 réponses
Avatar
MGN
bonsoir,
je pète les plombs sur un morceau de code qui marche sous firefox et pas sur
IE
voici le code (c'est pas très long)
Ma question donc : pourquoi ça marche pas sur ie ?
J'ai essayé tout et n'importe quoi. Je remets ma vie entre vos mains :-)...
PS : quand je recherche une solution à mon pb sur google, les solutions
proposées ne marchent jamais chez moi (IE version 6.0...)


<html>
<head>
</head>
<body>

<script LANGUAGE="JavaScript" type="text/javascript">
<!--

var numligne=1;
function LigneSup()
{
var td;
var tr;
var input;
var table=document.getElementById("the_table");


tr=document.createElement("TR");
tr.setAttribute("ID","TR"+numligne);

td=document.createElement("TD");

// nom de famille
input=document.createElement("INPUT");
input.setAttribute("type","text");
input.setAttribute("name","NOM"+numligne);
input.setAttribute("value","NOM"+numligne);
input.setAttribute("maxlength","25");
input.setAttribute("size","15");

td.appendChild(input);
tr.appendChild(td);
table.appendChild(tr);
numligne++;

}

function LigneMoins()
{
numligne--;
var table=document.getElementById("the_table");
//var tr=table.lastChild;
var tr=document.getElementById("TR"+numligne);
table.removeChild(tr);
}


//-->
</script>

<form name='theForm'>
<table border=0 id="the_table" name="the_tableID">
<tr>
<td> Nom </td>
</tr>
</table>

<input type='button' value='Ligne supp.' style='height:50px;'
onclick='LigneSup();'>
<input type='button' value='Ligne moins' style='height:50px;'
onclick='LigneMoins();'>
</form>

</body>
</html>

4 réponses

Avatar
Laurent Vilday

voici le code (c'est pas très long)
Ma question donc : pourquoi ça marche pas sur ie ?


je te conseille d'utiliser une DTD, sinon tu vas te retrouver avec des
problèmes de mode quirks et c'est pas marrant à manipuler par CSS et JS.

http://hsivonen.iki.fi/doctype/
http://www.quirksmode.org/css/quirksmode.html

<script LANGUAGE="JavaScript" type="text/javascript">


language="javascript" ne sert à rien, seul le type="text/javascript" est
intéressant, utilisable *et* utilisé.

tr.setAttribute("ID","TR"+numligne);


alert(tr.id) => rien du tout

mon IE6 ne comprend rien au setAttribute sur "ID" pas plus que sur
"maxlength" d'ailleurs. Ce qui sous entend que IE est case sensitive
quand FX ne l'est pas puisque IE comprend bien le setAttribute avec "id"
et "maxLength".

transforme le tr.setAttribute("ID", "TR" + numligne) en :
- tr.setAttribute("id", "TR" + numligne);

ou (mon préféré) en :
- tr.id = "TR" + numligne;

et le tr.setAttribute("maxlength", "25") en :
- tr.setAttribute("maxLength", 25);
ou (toujours mon préféré)
- tr.maxLength = 25;

D'ailleurs, au delà du problème que tu rencontres, qu'apporte réellement
le elt.setAttribute('attr', 'val') par rapport à la notation directe :
elt.attr = 'val' ?

function LigneMoins()
{
numligne--;
var table=document.getElementById("the_table");
//var tr=table.lastChild;
var tr=document.getElementById("TR"+numligne);
table.removeChild(tr);
}


Ca ça ne pourra jamais passer sous IE parce que le tr n'est *jamais* un
child de l'élément "table". Il est *toujours* le child de l'élément
"tbody" même si on n'en a pas spécifié.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>tbody tjrs présent</title>
<script type="text/javascript">
function clk()
{
var t = document.getElementsByTagName('tbody');
alert('tbody dans le document : ' + t.length);
for (var i=0; i<t.length; i++)
{
alert('contenu tbody num ' + i + 'n' + t[0].innerHTML);
}
}
</script>
</head>
<body>

<form name="theForm" action="#">
<table>
<tr><td> pas de tbody dans le code HTML </td></tr>
</table>

<input type="button" value="tst" onclick="clk();">
</form>

</body>
</html>

Dans cet "exemple" on a aucun élément "tbody" dans le tableau et
pourtant quand on click sur le bouton, il nous dit qu'il y a 1 tbody et
que son contenu est '<tr><td> pas .... HTML </td></tr>' . Dans un
certain sens c'est bien puisque ça nous oblige à utiliser cet élément
mais c'est un peu lourd quand on le sait pas :p

http://mokhet.com/tests/fciwa_060213.html si tu veux voir ton exemple
fonctionné sous IE6. Des clics trop rapides sur les boutons ne sont pas
tous pris en compte par IE6, il est de toute façon TRES lent lorsqu'il
manipule des éléments DOM. Pour pallier au problème dans la fonction
d'ajout je désactive le bouton avant de faire l'insertion et le réactive
à la fin (btnID.disabled = true || false;). Mais ça c'est un autre
problème :)

--
laurent

Avatar
ASM

http://mokhet.com/tests/fciwa_060213.html si tu veux voir ton exemple
fonctionné sous IE6.


Saurais-tu pourquoi mon IE 5.2.3 (Mac)
refuse :
input.type = "text";

(et bien sûr s'arrete là)


--
Stephane Moriaux et son [moins] vieux Mac

Avatar
Laurent Vilday

Saurais-tu pourquoi mon IE 5.2.3 (Mac)
refuse :
input.type = "text";


Grrr, j'en étais sûr qu'il y allait encore y avoir un truc qui passerait
pas avec IE mac :( Et forcémment sur ma notation préférée, j'ai le chic
pour choisir le fonctionnement qui passe jamais avec IE mac grrr grrr grrr.

Bon ben j'imagine qu'on est forcé de faire des
input.setAttribute('type', 'text'), c'est dommage, je préfère vraiment
écrire input.type = 'text', mais bon tant pis.

--
laurent

Avatar
ASM

Saurais-tu pourquoi mon IE 5.2.3 (Mac)
refuse :
input.type = "text";



J'aurais mieux fait de demander :
- comment expliquer à mon IE que c'est OK ?
qu'il peut le faire
qu'il va y arriver
à traiter 'type'

Grrr, j'en étais sûr qu'il y allait encore y avoir un truc qui passerait
pas avec IE mac :( Et forcémment sur ma notation préférée, j'ai le chic
pour choisir le fonctionnement qui passe jamais avec IE mac grrr grrr grrr.


ta notation préférée est celle de IE aussi ;)
(et la miennne, et celle de beaucoup)
Ce n'est donc pas çà qui coince.

Bon ben j'imagine qu'on est forcé de faire des


non, non,
mon IE ne veut pas du mot 'type'
(type est read-only, du moins ailleurs que dans ce cas, crois-je)
en attribute ou en direct : même tabac -> HS le JS


--
Stephane Moriaux et son [moins] vieux Mac