creer tableau fonction JS affiche en html [Résolu]

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

Citation:

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;
	}

26/12/2012, 16h38	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 32 861 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 32 861 Points : 51 455 Points : 51 455	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/ __________________ Ma page Developpez - Mon Blog Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr Humour
	00

26/12/2012, 21h56	#7
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 18 165 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 42 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 18 165 Points : 65 068 Points : 65 068	Comprendre document.write() en JavaScript... __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

27/12/2012, 08h17	#9
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 32 861 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 32 861 Points : 51 455 Points : 51 455	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) __________________ Ma page Developpez - Mon Blog Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr Humour
	00

27/12/2012, 09h05	#11
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 32 861 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 32 861 Points : 51 455 Points : 51 455	Code : Sélectionner tout - Visualiser dans une fenêtre à part tr.setAttribute("border: 2pt solid black; width: 6em;"); __________________ Ma page Developpez - Mon Blog Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr Humour
	00

26/12/2012, 19h15	#4
armoirapizza Candidat au titre de Membre du Club Inscription : mars 2011 Messages : 56 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : mars 2011 Messages : 56 Points : 12 Points : 12	Messeigneurs; merci pour vos réponse pleines de bienveillance. Je travaille et je reviens par ooù commencer....
	00

26/12/2012, 19h26	#5
NoSmoking Modérateur Inscription : janvier 2011 Messages : 5 119 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 5 119 Points : 8 836 Points : 8 836	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.
	00

27/12/2012, 00h21	#8
armoirapizza Candidat au titre de Membre du Club Inscription : mars 2011 Messages : 56 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : mars 2011 Messages : 56 Points : 12 Points : 12	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
	00

27/12/2012, 19h42	#12
NoSmoking Modérateur Inscription : janvier 2011 Messages : 5 119 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 5 119 Points : 8 836 Points : 8 836	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.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email