creer tableau fonction JS affiche en html

**armoirapizza** · 26/12/2012, 16h33

Bonjour,

je souhaite créer un fonction JS qui affiche un tableau à l'ouverture de la page html.
Le correcteur w3c ne détecte pas d'erreur mais ça ne fonctionne pas..

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>
  <head>
    <meta charset="utf-8" />
    <title> devoir 4 </title>
	<script type="text/javascript">
 
	function drawTable(val)
	{
		var tbl = document.createElement("TABLE");
		tbl.setAttribute("border-collapse:collapse"; 5);
		var tr = document.createElement("TR");
		tr.setAttribute("border: 2pt solid black; width: 6em;");
		for (var i=0; i<tbl.length; i++){
			var td = document.createElement("TD");
			td.setAttribute("border: 2pt solid black; width:6em;");
		}
		return tbl;
	}
 
<style type="text/css">
      table {border-collapse: collapse;}
      td, th {border: 2pt solid black;}
      td, th {width: 6em;}
      img {width: 6em;}
    </style>
 
  </head>
   <body onload="drawTable();">
<button onclick="alert('Nouvelle Partie')">Recommencer</button>
		</body>
	</html>

Si quelqu'un à la patience d'y jeter un oeil...

**SpaceFrog** · 26/12/2012, 16h38

Code :

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

tbl.setAttribute("border-collapse:collapse"; 5);

setAttribute pour des propriétés css ...
c'est plus de la patience qu'il faut ^^

jette plutôt un œil ar là :

http://www.developpez.net/forums/d47...us-rapidement/

**Bovino** · 26/12/2012, 16h41

Le correcteur w3c ne détecte pas d'erreur

C'est un peu normal puisqu'il ne vérifie pas le JavaScript !

Code :

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

return tbl;

Tu penses qu'en le renvoyant très fort, il atterrira dans ta page ?

Plus sérieusement, c'est bien de renvoyer l'objet table, mais encore faut-il en faire quelque chose , par exemple avec appendChild().

**armoirapizza** · 26/12/2012, 19h15

Messeigneurs;

merci pour vos réponse pleines de bienveillance.
Je travaille

et je reviens

par ooù commencer....

**NoSmoking** · 26/12/2012, 19h26

Bonjour,
lorsque l'on écrit tbl.setAttribute("border-collapse:collapse"; 5); qu'est ce qu'on attend comme résultat ?

De plus si tu déclares des styles "externes" (aux balises), inutile de surcharger ton code.

**armoirapizza** · 26/12/2012, 21h29

bonsoir,

bon, la base de chez base.
ci dessous, j'affiche les valeurs contenues dans le tableau.
Pourriez vous me dire comment attribuer le style css inclus dans le code?
Please...

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
36
<!DOCTYPE HTML>
  <head>
    <meta charset="utf-8" />
    <title> devoir 4 </title>
	<script type="text/javascript">
 
	function drawTable()
	{
	var sheepTab= [0,1,1,1,0,0,2,2,2,0];
	for( var i=0; i<sheepTab.length; i++){
	}
	document.write(sheepTab);
	}
 
	</script>
 
    <style type="text/css">
      table {border-collapse: collapse;}
      td, th {border: 2pt solid black;}
      td, th {width: 6em;}
      img {width: 6em;}
    </style>
 
  </head>
   <body onload="drawTable();">
	  <header>
	    <h1>Devoir n°4 NFA016</h1>
	  </header>
 
	    <header>
	      <h2>Jeu des moutons</h2>
		</header>
 
			<button onclick="alert('Nouvelle Partie')">Recommencer</button>
		</body>
	</html>

Par ailleurs, pourquoi le reste du html ne s'affiche plus (les titres...)?

Merci encore de votre aide...

**Bovino** · 26/12/2012, 21h56

Comprendre document.write() en JavaScript...

**armoirapizza** · 27/12/2012, 00h21

Bonjoir Bonino,

merci pour ce lien qui me montre donc que cette méthode n'est pas appropriée.
Elle s'applique à du texte.
Ce que je voudrais c'est créer un tableau avec JS et l'appeler par le biais d'un fonction dans mon html.
De plus, je voudrais lui adjoindre des normes css (border, color, width...).

Voudrais tu bien me donner cette astuce à l'oeil (de boeuf) car ceci n'est que le cadet de mes soucis pour le programme que je souhaite réaliser...

Par avance merci, sois pas vache et gr^zce à toi je ferai mouche

**SpaceFrog** · 27/12/2012, 08h17

tu as l'anchois ...
des scripts y'en a des masses (carpone)
jette donc un oeil au lien que je t'ai donné plus haut

pour l'attribution d'une propriété de style css au moyen de javascript ...

Code :

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

obj.style.borderCollapse="collapse"

de manière générale les propriétés de style css avec tiret se convertissent en js en supprimant le tiret et en mettant une majuscule après le tiret:

border-width => borderWidth
font-size=> fontSize

(à quelques rares exceptions près)

**sdamart** · 27/12/2012, 09h02

armoirapizza, d'après le code, il faut effectivement préférer "appendChild" que "document.write()", mais je remarque que tu n'intègre pas tes ligne et tes cellules.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function drawTable(val)// attention tu n'utilise jamais "val" dans ta fonction !!!
	{
		var tbl = document.createElement("TABLE");
		tbl.setAttribute("border-collapse:collapse");
		var tr = document.createElement("TR");
		tr.setAttribute("border: 2pt solid black; width: 6em;");
		for (var i=0; i<tbl.length; i++){
			var td = document.createElement("TD");
			td.setAttribute("border: 2pt solid black; width:6em;");
                        tr.appendChild(td);
		}
                tbl.appendChild(tr)
		document.body.appendChild(tbl)
	}

**SpaceFrog** · 27/12/2012, 09h05

Code :

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

tr.setAttribute("border: 2pt solid black; width: 6em;");

**NoSmoking** · 27/12/2012, 19h42

Il existe également la solution de mettre en "dur" un TABLE stylée, que l'on masque, et de la cloner au moment de la remise à zéro avec l'avantage de pouvoir voir le résultat du style et cela permet une modification somme toute plus aisée de celle ci en cas de besoin.

**armoirapizza** · 27/12/2012, 22h37

Bonsoir,

avec un peu d'aide et d'huile de colza voici :
la partie JS aec fonction initialize et la fonction drawTable.
Comme ça plus besoin de l'avoir dans le body.
Le hic c'est que ma boucle tourne mal, je 10 cases avec pas d'image sur [i]=0, une image si [i]=1 et une autre si [i]=2.
Je ne sais pas pourquoi ça me sort 16 ou 17 cases et une logique que je ne comprend pas dans l'attribution des images.

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<html>
  <head>
    <title>Second devoir</title>
	<script type="text/javascript">
 
	var statusOfMoutons = new Array();
	var idOfCurrentlySelectedMouton = -1;
 
	function initializeGame()
	{
		statusOfMoutons = [0,1,1,1,0,0,2,2,2,0];
		idOfCurrentlySelectedMouton = -1;
		drawTable();
	}
 
	function clickOnMouton(idOfClickedCell)
	{
		//alert("this is " + idOfClickedCell + ", with status: " + statusOfMoutons[idOfClickedCell]);
 
		statusOfMoutons[idOfClickedCell] = ((statusOfMoutons[idOfClickedCell]+1)%3);
 
		if(idOfCurrentlySelectedMouton == idOfClickedCell)
		{
			idOfCurrentlySelectedMouton = -1;
		}
		else if(idOfCurrentlySelectedMouton == -1)
		{
			idOfCurrentlySelectedMouton = idOfClickedCell;
		}
		else
		{
			//alert("wants to move to " + idOfClickedCell);
		}
 
		drawTable();
	}
 
 
	function drawTable()
	{
		statusOfMoutons = [0,1,1,1,0,0,2,2,2,0];
		var tableContentString = "<tr>";
		for(var i=0; i<statusOfMoutons.length; i++)
		{
			if (statusOfMoutons[i] == 0)
				tableContentString += "<td onclick='clickOnMouton(" + i + ");'>"; 
 
			else if (statusOfMoutons[i] == 1)
					tableContentString += "<td onclick='clickOnMouton(" + i + ");'><img src='mouton1.png' alt=''/>";
 
			else if(statusOfMoutons[i] == 2)
				tableContentString += "<td onclick='clickOnMouton(" + i + ");'><img src='mouton2.png' alt=''/>";
 
			tableContentString += "</td>";	
		}
 
		tableContentString += "</tr>";
 
		var tableElement = document.getElementById('moutonTable');
		tableElement.innerHTML = tableContentString;
	}
 
	</script>
 
	<style type="text/css">
      table {border-collapse: collapse;}
      td, th {border: 2pt solid black;}
      td, th {width: 6em; height: 6em;}
      img {width: 6em;}
    </style>
	</head>
 
<body onload="initializeGame();">
 
	<table id="moutonTable">	
	</table>
	<input type="button" value="recommencer" onclick="initializeGame();"/> 
</body>
</html>

**armoirapizza** · 28/12/2012, 15h45

J'ai trouvé, la 3eme condition était superflue.

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
function drawTable()
	{
 
		var tableContentString = "<tr>";
		for(var i=0; i<tabOfMoutons.length; i++)
		{
			if (tabOfMoutons[i] == 1)
				tableContentString += "<td onclick='clickOnMouton(" + i + ");'><img src='mouton1.png' alt='' witdth=6em/>";
 
			else if (tabOfMoutons[i] == 2)
					tableContentString += "<td onclick='clickOnMouton(" + i + ");'><img src='mouton2.png' alt='' witdth=6em/>";
 
			else 
				tableContentString += "<td onclick='clickOnMouton(" + i + ");'><img src='' witdth=6em/>"; 
 
			tableContentString += "</td>";	
		}
 
		tableContentString += "</tr>";
 
		var tableElement = document.getElementById('moutonTable');
		tableElement.innerHTML = tableContentString;
	}

creer tableau fonction JS affiche en html

JavaScript

Discussions similaires

Partager

Partager