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 :

Tableau Javascript avec variables entrées en html


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    février 2016
    Messages
    28
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2016
    Messages : 28
    Points : 17
    Points
    17
    Par défaut Tableau Javascript avec variables entrées en html
    Bonjour,

    Je suis débutant en programmation et dans le cadre d'un projet je doit réaliser un tableau en javascript.
    seul problème mon tableau doit se dessiner en fonction des valeurs largeur et hauteur que l'utilisateur doit définir par avance.

    J'ai donc dans un premier temps créer mes zones pour entrer la valeur souhaité par l'utilisateur en html
    avec:


    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <form method="post">
    	<a> largeur de la grille : <input id="largeur" type="text" name="largeur"></input></a>
    	<a> hauteur de la grille : <input id="hauteur" type="text" name="hauteur"></input></a>
    	<input type="submit" value="valider">  
    </form>

    je recupère ensuite ses valeurs dans le script:

    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
    <script type="text/javascript" language="javascript">
     
    var largeur = document.getElementById("largeur");
    var hauteur = document.getElementById("hauteur");
     
    var table = new Array();
     
    for ( var i=0; i<largeur;i++)
    {
    	for (var j=0; j<hauteur;j++)
    	{
    		document.write(table[i][j] + "&emsp;"  ) ;
    	}
    	document.write("<br/>");
    }  
     
    </script>
    Cela ne marche bien évidement pas mais je ne vois pas du tout comment faire.
    j'ai réussi a le faire en php

    cela me donne:
    Code php : 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
    <p><u>Choisissez les dimenssions de votre grille</u></p>
     <form method="post">
    	<a> largeur de la grille : <input id="largeur" type="text" name="largeur"></input></a>
    	<a> hauteur de la grille : <input id="hauteur" type="text" name="hauteur"></input></a>
    	<input type="submit" value="valider">  
    </form>
     
     
    <table id="tableau" >
    <?php 
     
    for ($i=1 ; $i<$hauteur+1; $i++ ) {
    	?>
    	<tr>
    		<?php	
    	for ($j=1 ; $j<$largeur+1 ; $j++) {
    		?>
    	<td></td><?php	
    ;}
    	?>	
    	</tr>	
    	<?php	
    ;}
    ?>	
    </table>
    je voudrais donc l'équivalent en JS si quelqu'un serait comment faire.

  2. #2
    Rédacteur
    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    6 386
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 70
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 6 386
    Points : 23 054
    Points
    23 054
    Billets dans le blog
    120
    Par défaut


    Oui ! Je sais que faire son exercice à sa place ne l'aidera pas à comprendre. Mais il part de tellement loin que j'ai pitié ! Et puis ce n'est pas Noël tous les jours.

    À vous de tirer le meilleur de mon exemple. Il ne correspond pas exactement à votre demande, mais il devrait vous aider. Il suffit de copier-coller pour tester.

    Il vous faudra travailler seul pour comprendre et assimiler chaque instruction, je ne répondrai pas à vos questions. J'en ai déjà trop fait.

    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
    71
    72
    73
    74
    75
    76
    77
    78
    <!DOCTYPE html>
    <html lang="fr" dir="ltr">
    <head>
      <meta http-equiv="cache-control" content="public, max-age=60">
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1.0">
      <meta name="author" content="Daniel Hagnoul">
      <title>Test</title>
      <style>
        input[name="hauteur"], input[name="largeur"] {
          width: 50px;
        }
        table {
          margin: 12px;
          border-collapse: collapse;
          border-spacing: 0px;
        }
        table, th, td {
          padding: 5px;
          border: 1px solid black;
        }
        th, td {
          width: 50px;
          height: 50px;
        }
      </style>
    </head>
    <body>
      <form>
        <label>Largeur d'une cellule (50 à 200) : <input type="number" name="largeur" value="100" min="50" max"200" step="10"></label>
        <br>
        <label>Hauteur d'une cellule (50 à 200) : <input type="number" name="hauteur" value="100" min="50" max"200" step="10"></label>
        <br>
        <input type="submit"> 
      </form>
      <table id="maTable">
        <thead>
          <tr>
            <th></th>
            <th>E</th>
            <th>F</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>one</td>
            <td>un</td>
          </tr>
        </tbody>
          <tr>
            <td>2</td>
            <td>two</td>
            <td>deux</td>
          </tr>
      </table>
      <script>
        document.querySelector( 'input[type="submit"]' ).addEventListener( 'click', function( ev ){
          ev.preventDefault();
          
          var
            largeur = document.querySelector( 'input[name="largeur"]' ).value,
            hauteur = document.querySelector( 'input[name="hauteur"]' ).value,
            rows = document.querySelectorAll( 'tr', '#maTable' ),
            cells;
            
          for ( var i = 0; i < rows.length; i++ ){
            cells = rows[i].cells;
            
            for ( var j = 0; j < cells.length; j++ ){
              cells[j].style.width = largeur + 'px';
              cells[j].style.height = hauteur + 'px';
            }
          }
        }, false );
      </script>
    </body>
    </html>

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    février 2016
    Messages
    28
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2016
    Messages : 28
    Points : 17
    Points
    17
    Par défaut
    Merci de ta réponse.

    Ce n'est pas exactement ce que je veux faire. il me faut modifier le nombre de cellule, c'est ce que j'entendais par taille mais je me suis surement mal exprimer.
    Je vais essayer de modifier un peu ton code pour y arriver.
    merci a toi.

  4. #4
    Membre émérite
    Avatar de Eric2a
    Homme Profil pro
    Technicien
    Inscrit en
    septembre 2005
    Messages
    1 225
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Corse (Corse)

    Informations professionnelles :
    Activité : Technicien

    Informations forums :
    Inscription : septembre 2005
    Messages : 1 225
    Points : 2 411
    Points
    2 411
    Par défaut
    Le petit lutin du père-noël vous salut,

    Un exemple de 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 lang="fr" dir="ltr">
    <head>
    	<meta charset="utf-8" />
    	<title>Test</title>
    	<style>
                    input[name="hauteur"],input[name="largeur"]{width:50px}
                    table{margin:1em;border-collapse:collapse;border-spacing:0}
                    table,th,td{padding:5px;border:1px solid black}
                    th,td{width:80px;height:40px}
            </style>
    </head>
    <body>
    	<form action="" method="post">
    		<fieldset>
    			<legend>Dimenssions de votre grille</legend>
    			<label>Nombre de colonnes (1 à 20) : <input type="number" id="largeur" name="largeur" value="1" min="1" max="10" step="1" /></label><br />
    			<label>Nombre de lignes (1 à 40) : <input type="number" id="hauteur" name="hauteur" value="1" min="1" max="20" step="1" /></label><br />
    			<input type="submit" value="valider" />
    		</fieldset>
    	</form>
     
    	<div id="tableContainer"></div>
     
    	<script>
            (function(){
                    function createTable(){
                            var table,tbody,row,cell,tr,td;
     
                            table=document.createElement('table');
                            tbody=document.createElement('tbody');
     
                            for(row=0;row<heightID.value;row++){
                                    tr=document.createElement('tr');
                                    for(cell=0;cell<widthID.value;cell++){
                                            td=document.createElement('td');
                                            td.appendChild(
                                                    document.createTextNode('Col:'+(cell+1)+' ; lig:'+(row+1))
                                            );
                                            tr.appendChild(td);
                                    }
                                    tbody.appendChild(tr);
                            }
                            table.appendChild(tbody);
     
                            while(containerID.lastChild)containerID.removeChild(containerID.lastChild);
                            containerID.appendChild(table);
                            return !1;
                    }
     
                    var     widthID=document.getElementById('largeur'),
                            heightID=document.getElementById('hauteur'),
                            containerID=document.getElementById('tableContainer');
     
                    widthID.onclick=createTable;
                    heightID.onclick=createTable;
     
                    createTable();
            })();
            </script>
    </body>
    </html>

    Et surtout un excellent Cours de Javascript où tu découvriras le DOM qui donne la possibilité de modifier, ajouter et supprimer du contenu dans un document.

    Et n'hésites pas à suivre les cours et tutoriels pour apprendre le (X)HTML.

  5. #5
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    février 2016
    Messages
    28
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2016
    Messages : 28
    Points : 17
    Points
    17
    Par défaut
    C'est exactement ca.

    tu me sauve j'avais commencé à le faire avec les appendChild, tr, td mais je n'ai pas réussi à aboutir à quelques chose.
    je regarderais tes liens pour la suite de mon projet


    Un grand merci à vous en tout cas vous m’ôtez une épine du pied.

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

Discussions similaires

  1. function depuis javascript avec variable
    Par cedp02 dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 04/04/2014, 23h51
  2. Réponses: 10
    Dernier message: 02/07/2012, 17h30
  3. renseigner tableau javascript avec php
    Par benjamin03 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 21/05/2010, 18h49
  4. Envoyer un tableau javascript avec AJAX
    Par matteli dans le forum Général JavaScript
    Réponses: 16
    Dernier message: 18/10/2008, 15h20
  5. Javascript avec des menus deroulant html
    Par thibault31590 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 01/11/2006, 14h48

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