Soutenez-nous
Publicité
+ Répondre à la discussion
Affichage des résultats 1 à 14 sur 14
  1. #1
    Candidat au titre de Membre du Club
    Homme Profil pro
    Inscrit en
    mars 2011
    Messages
    56
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : mars 2011
    Messages : 56
    Points : 12
    Points
    12

    Par défaut creer tableau fonction JS affiche en html

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

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
    Inscrit en
    mars 2002
    Messages
    34 525
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 64
    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 : 34 525
    Points : 56 443
    Points
    56 443

    Par défaut

    Code :
    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.oxygen-translations.com|www.saftair.com| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  3. #3
    Responsable Développement Web

    Avatar de Bovino
    Homme Profil pro Didier Mouronval
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    21 281
    Détails du profil
    Informations personnelles :
    Nom : Homme Didier Mouronval
    Âge : 43
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 21 281
    Points : 83 193
    Points
    83 193

    Par défaut

    Le correcteur w3c ne détecte pas d'erreur
    C'est un peu normal puisqu'il ne vérifie pas le JavaScript !

    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().
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  4. #4
    Candidat au titre de Membre du Club
    Homme Profil pro
    Inscrit en
    mars 2011
    Messages
    56
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : mars 2011
    Messages : 56
    Points : 12
    Points
    12

    Par défaut

    Messeigneurs;

    merci pour vos réponse pleines de bienveillance.
    Je travaille et je reviens
    par ooù commencer....

  5. #5
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    7 005
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 7 005
    Points : 12 607
    Points
    12 607

    Par défaut

    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.

  6. #6
    Candidat au titre de Membre du Club
    Homme Profil pro
    Inscrit en
    mars 2011
    Messages
    56
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : mars 2011
    Messages : 56
    Points : 12
    Points
    12

    Par défaut

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

  7. #7
    Responsable Développement Web

    Avatar de Bovino
    Homme Profil pro Didier Mouronval
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    21 281
    Détails du profil
    Informations personnelles :
    Nom : Homme Didier Mouronval
    Âge : 43
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 21 281
    Points : 83 193
    Points
    83 193
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  8. #8
    Candidat au titre de Membre du Club
    Homme Profil pro
    Inscrit en
    mars 2011
    Messages
    56
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : mars 2011
    Messages : 56
    Points : 12
    Points
    12

    Par défaut

    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

  9. #9
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
    Inscrit en
    mars 2002
    Messages
    34 525
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 64
    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 : 34 525
    Points : 56 443
    Points
    56 443

    Par défaut

    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 :
    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.oxygen-translations.com|www.saftair.com| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  10. #10
    Membre du Club

    Homme Profil pro Sébastien DAMART
    Développeur Web
    Inscrit en
    septembre 2012
    Messages
    29
    Détails du profil
    Informations personnelles :
    Nom : Homme Sébastien DAMART
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : septembre 2012
    Messages : 29
    Points : 64
    Points
    64

    Par défaut

    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 :
    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)
    	}

  11. #11
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
    Inscrit en
    mars 2002
    Messages
    34 525
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 64
    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 : 34 525
    Points : 56 443
    Points
    56 443

    Par défaut

    Code :
    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.oxygen-translations.com|www.saftair.com| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  12. #12
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    7 005
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 7 005
    Points : 12 607
    Points
    12 607

    Par défaut

    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.

  13. #13
    Candidat au titre de Membre du Club
    Homme Profil pro
    Inscrit en
    mars 2011
    Messages
    56
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : mars 2011
    Messages : 56
    Points : 12
    Points
    12

    Par défaut

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

  14. #14
    Candidat au titre de Membre du Club
    Homme Profil pro
    Inscrit en
    mars 2011
    Messages
    56
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : mars 2011
    Messages : 56
    Points : 12
    Points
    12

    Par défaut I've found

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

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

+ Répondre à la discussion
Cette discussion est résolue.

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •