+ Répondre à la discussion
Affichage des résultats 1 à 14 sur 14
  1. #1
    Futur Membre du Club
    Homme Profil pro
    Inscrit en
    mars 2011
    Messages
    63
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : mars 2011
    Messages : 63
    Points : 15
    Points
    15

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

  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
    35 807
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    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 : 35 807
    Points : 60 691
    Points
    60 691
    Billets dans le blog
    1

    Par défaut

    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.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
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    23 792
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Gironde (Aquitaine)

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

    Informations forums :
    Inscription : juin 2008
    Messages : 23 792
    Points : 93 232
    Points
    93 232
    Billets dans le blog
    20

    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
    Futur Membre du Club
    Homme Profil pro
    Inscrit en
    mars 2011
    Messages
    63
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : mars 2011
    Messages : 63
    Points : 15
    Points
    15

    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
    8 809
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 8 809
    Points : 17 488
    Points
    17 488

    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
    Futur Membre du Club
    Homme Profil pro
    Inscrit en
    mars 2011
    Messages
    63
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : mars 2011
    Messages : 63
    Points : 15
    Points
    15

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

  7. #7
    Responsable Développement Web


    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    23 792
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Gironde (Aquitaine)

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

    Informations forums :
    Inscription : juin 2008
    Messages : 23 792
    Points : 93 232
    Points
    93 232
    Billets dans le blog
    20
    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
    Futur Membre du Club
    Homme Profil pro
    Inscrit en
    mars 2011
    Messages
    63
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : mars 2011
    Messages : 63
    Points : 15
    Points
    15

    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
    35 807
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    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 : 35 807
    Points : 60 691
    Points
    60 691
    Billets dans le blog
    1

    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 : 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.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
    Développeur Web
    Inscrit en
    septembre 2012
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

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

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

  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
    35 807
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    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 : 35 807
    Points : 60 691
    Points
    60 691
    Billets dans le blog
    1

    Par défaut

    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.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
    8 809
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 8 809
    Points : 17 488
    Points
    17 488

    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
    Futur Membre du Club
    Homme Profil pro
    Inscrit en
    mars 2011
    Messages
    63
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : mars 2011
    Messages : 63
    Points : 15
    Points
    15

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

  14. #14
    Futur Membre du Club
    Homme Profil pro
    Inscrit en
    mars 2011
    Messages
    63
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : mars 2011
    Messages : 63
    Points : 15
    Points
    15

    Par défaut I've found

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

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