[DOM] Modifier la taille d'une cellule d'un tableau

Version imprimable

Est-ce que c'est moi qui devient fou ou est-ce qu'il y a une raison qui fait que le code suivant n'affiche rien sous ie (6 et 7):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
	<head>
	</head>
 
	<body>
		<script type="text/javascript">
 
			var table = document.createElement("table");
			var tr = document.createElement("tr");
			var td = document.createElement("td");
			var td2 = document.createElement("td");
 
			tr.appendChild(td);
			tr.appendChild(td2);
			table.appendChild(tr);
			document.body.appendChild(table);
 
			td.style.backgroundColor="red";
			td.style.width = "100px";
			td.style.height = "20px";
 
			td2.style.backgroundColor="blue";
			td2.style.width = "50px";
			td2.style.height = "20px";
 
		</script>
	</body>
 
</html>

Alors que dans FF on a bien le résultat attendu et que dans le module IE Developer Toolbar, on voit bien les éléments qui sont ajoutés au dom avec leurs bonnes dimensions...

24/04/2008, 10h56
Matthieu2000

enleve les px.

Bonjour,
as-tu essayé d'inverser l'ordre d'ajout dans la page
Code:

1 2 3 4 document.body.appendChild(table); table.appendChild(tr); tr.appendChild(td2); tr.appendChild(td);
?

A+

24/04/2008, 11h03
DoubleU

Matthieu2000 >> ca marche pas mieux, et sous FF ca fait des carrés de 1x1

E.Bzz >> Meme résultat. Je crois que j'ai du tester a peu prêt tous les ordres possibles en plus lol
24/04/2008, 11h05
E.Bzz

Alors fait de ton script une fonction (en conservant l'ordre que je t'ai donné) que tu appelleras sur le onload du body.
Au moins, le document sera complètement créé au moment de l'exécution ...

A+

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
	<head>
			<script type="text/javascript">
			function test(){	
				var table = document.createElement("table");
				var tr = document.createElement("tr");
				var td = document.createElement("td");
				var td2 = document.createElement("td");
 
				document.getElementById("dd").appendChild(table);
				table.appendChild(tr);
				tr.appendChild(td2);
				tr.appendChild(td);
 
				td.style.backgroundColor="red";
				td.style.width = "100px";
				td.style.height = "20px";
 
				td2.style.backgroundColor="blue";
				td2.style.width = "50px";
				td2.style.height = "20px";
			}
		</script>
 
 
	</head>
 
	<body>
		<div id="dd"></div>
		<input type="button" onclick="test()" value="go" />
	</body>
 
</html>

Pareil.

Si ca se trouve c'est vraiment un truc tout con mais a force d'etre dessus, je vois plus rien :roll:

24/04/2008, 11h35
Matthieu2000

il faut un element tbody entre le table et le tr
24/04/2008, 11h46
DoubleU

Bien vu

Merci a tous, même si finalement je vais ptete plutot utiliser des divs au lieu d'un tableau, j'aurais au moins appris un truc ^^