Tableau Javascript avec variables entrées en html

**lumfast** · 22/02/2016, 22h59

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.

**danielhagnoul** · 23/02/2016, 02h39

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

**lumfast** · 23/02/2016, 10h58

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.

**Eric2a** · 23/02/2016, 14h20

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.

**lumfast** · 23/02/2016, 16h32

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.

Tableau Javascript avec variables entrées en html

JavaScript

Discussions similaires

Partager

Partager