Tableau Javascript avec variables entrées en html

Version imprimable

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:

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:

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:

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.

:calim2:

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

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

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>N°</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>

23/02/2016, 10h58
lumfast

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.

Le petit lutin du père-noël vous salut,

Un exemple de code...

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
<!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 :fleche: 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 :fleche: cours et tutoriels pour apprendre le (X)HTML.

23/02/2016, 16h32
lumfast

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.