Remplir les cases d'une <TABLE>

Version imprimable

28/11/2018, 11h46
deetier.stephane

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?
28/11/2018, 15h25
Vil'Coyote

:weird::weird: 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é" ??

Insertion

Bonjour

Le voici mon 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>
<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.

08/12/2018, 17h39
foetus

En vanilia JavaScript :mrgreen:, 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")) { }
09/12/2018, 21h01
Beginner.

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

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 ?).

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:

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>