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

**DoubleU** · 24/04/2008, 11h07

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

**Matthieu2000** · 24/04/2008, 11h56

enleve les px.

**E.Bzz** · 24/04/2008, 11h58

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

?

A+

**DoubleU** · 24/04/2008, 12h03

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

**E.Bzz** · 24/04/2008, 12h05

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+

**DoubleU** · 24/04/2008, 12h17

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Matthieu2000** · 24/04/2008, 12h35

il faut un element tbody entre le table et le tr

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager