IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Remplir les cases d'une <TABLE>


Sujet :

JavaScript

  1. #1
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Avril 2014
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 32
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Avril 2014
    Messages : 3
    Points : 3
    Points
    3
    Par défaut Remplir les cases d'une <TABLE>
    Bonjour Les amis

    Comment créez le carré dans un carré dans une page html et comment les donnés les dimensions sur la page css?

  2. #2
    Modérateur
    Avatar de Vil'Coyote
    Homme Profil pro
    Développeur adélia & Web
    Inscrit en
    Février 2008
    Messages
    4 583
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur adélia & Web
    Secteur : Industrie

    Informations forums :
    Inscription : Février 2008
    Messages : 4 583
    Points : 7 503
    Points
    7 503
    Par défaut
    tu parles de quoi?? d'un div dans un div, un tableau dans un tableau? d'un div dans un tableau? d'un paragraphe dans un div? c'est quoi au juste la notion de "carré" ??
    la vie n'est pas cirrhose des foies ...

    Avant de poster un message Rechercher n'est pas qu'une option.
    FAQ Web - Tuto Web

  3. #3
    Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Avril 2014
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 32
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Avril 2014
    Messages : 3
    Points : 3
    Points
    3
    Par défaut Insertion
    Bonjour

    Le voici mon code

    Code html : 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
    <!DOCTYPE html>
    <html>
    <head>
    	<title>Puzzle</title>
    	<meta charset="utf-8">
    	<link rel="stylesheet"  href="projet.css">
    </head>
    <body>
    	<div class="c">
    	<div class="c1">
    	<h1>Bienvenu dans votre Jeu Puzzle</h1>
    	</div>
    	<div class="c2">
    	<table>
    		<tr>
    			<td>.</td>
    			<td>.</td>
    			<td>.</td>
    			<td>.</td>
    			<td>.</td>
    			<td>.</td>
    			<td>.</td>
    		</tr>
    		<tr>
    			<td>.</td>
    			<td>.</td>
    			<td>.</td>
    			<td>.</td>
    			<td>.</td>
    			<td>.</td>
    			<td>.</td>
    		</tr>
    		<tr>
    			<td>.</td>
    			<td>.</td>
    			<td>.</td>
    			<td>.</td>
    			<td>.</td>
    			<td>.</td>
    			<td>.</td>
    		</tr>
    		<tr>
    			<td>.</td>
    			<td>.</td>
    			<td>.</td>
    			<td>.</td>
    			<td>.</td>
    			<td>.</td>
    			<td>.</td>
    		</tr>
    		</div>
    	</table>
    	<div class="c3">
    	<input type="submit" value="Nouveau">
    	<input type="submit" value="Vérifier">
    	<input type="submit" value="Réinitialiser">
    	<script type="text/javascript" src="projet.js">
     
    	</script>
     
    </body>
    </html>

    Je voudrai insérer les chiffres dans mon tableau en javascript, je ne sais pas comment faire.

  4. #4
    Expert éminent sénior
    Homme Profil pro
    Analyste/ Programmeur
    Inscrit en
    Juillet 2013
    Messages
    4 627
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Analyste/ Programmeur

    Informations forums :
    Inscription : Juillet 2013
    Messages : 4 627
    Points : 10 551
    Points
    10 551
    Par défaut
    En vanilia JavaScript , il faut donner un identifiant (id) à chaque case, et ensuite récupérer une case avec la fonction getElementById (*, <- lien en français MDN) et ensuite écrire dedans avec l'attribut innerHTML (<- lien en français MDN)

    Et je pense , qu'il faut mieux générer la grille en JavaScript au lieu de l'hardcoder en HTML.


    * : tester le retour if ((elt != null) && (typeof elt != "undefined")) { }

  5. #5
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    Utiliser un ID pour chaque cellule n'est pas obligatoire, l’élément table a des propriétés qui permettent d'accéder à chaque cellule d'une manière moins fastidieuse que celle avec l'usage d'ID...

    Citation Envoyé par deetier.stephane Voir le message
    Je voudrai insérer les chiffres dans mon tableau en javascript, je ne sais pas comment faire.
    Où se trouvent ces chiffres ? Et dans quel ordre tu veux les insérer dans la table (table et non tableau, non ?).

  6. #6
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 529
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 529
    Points : 4 739
    Points
    4 739
    Par défaut
    un truc comme ça ?
    (testé sur Chrome, FireFox rejette le drag/ drop en code simple)
    et pas besoin de <table> pour dessiner des carrés
    ni de mettre des id partout...
    Code HTML : 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
    <!DOCTYPE HTML>
    <html lang="fr">
    <head>
      <meta charset="UTF-8">
      <title>Puzzle</title>
      <style>
        #grand-Carré {
          margin : 20px;
          width  : 400px;
          height : 400px;
        }
        #grand-Carré > i {
          box-sizing : border-box;
          display : block; 
          float   : left;
          width   : 100px;
          height  : 100px;
          border  : 1px solid orangered;  
          background-color: orange;
          font-size  : 20px;
          text-align : center;
          line-height: 85px;
          cursor     : pointer;
        }
        .hovered { background-color: yellow !important }
      </style>
    </head>
    <body>
    	<div class="c">
        <div class="c1">
        <h1>Bienvenu dans votre Jeu Puzzle</h1>
        </div>
        <div id="grand-Carré"></div>
     
        <div class="c3">
        <input type="submit" value="Nouveau">
        <input type="submit" value="Vérifier">
        <input type="submit" value="Réinitialiser">
      </div>
      <script>
        "use strict"
        let Grd_Carre = document.getElementById('grand-Carré');
        for (let i=0; i<16; i++) {
          let nv_Carre = document.createElement('i');
          nv_Carre.draggable   = true;
          nv_Carre.textContent = i;
          Grd_Carre.appendChild(nv_Carre);
        }
        let Node_Depla = null;
        Grd_Carre.ondragstart = function(e) {
          Node_Depla = e.target;
        }
        Grd_Carre.ondragover = function(e) {
          e.preventDefault();
        }
        Grd_Carre.ondragenter = function(e) {
          e.target.className = 'hovered';
        }
        Grd_Carre.ondragleave = function(e) {
          e.target.className = '';
        }
       // Grd_Carre.ondragend = function(e) {    }
        Grd_Carre.ondrop = function(e) {
          e.target.className = '';
          Grd_Carre.insertBefore(Node_Depla, e.target);
          Node_Depla = null;
        }
      </script>
    </body>
    </html>
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

Discussions similaires

  1. Réponses: 27
    Dernier message: 02/02/2016, 12h01
  2. [AC-2003] Remplir les champs d'une table
    Par chuspyto dans le forum Modélisation
    Réponses: 2
    Dernier message: 16/02/2015, 12h33
  3. [AC-2007] Remplir les champs d'une table
    Par chargeur123 dans le forum Access
    Réponses: 4
    Dernier message: 06/01/2012, 18h24
  4. Réponses: 8
    Dernier message: 29/06/2006, 16h37
  5. Probleme de requete pour remplir les champs d'une table
    Par Jim_Nastiq dans le forum Langage SQL
    Réponses: 7
    Dernier message: 06/04/2006, 15h56

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo