Générer un tableau à partir de checkbox

**mitsukk1992** · 11/07/2014, 10h29

Bonjour,

J'aimerais pouvoir afficher un tableau en fonction de cases à cocher.
Dans ce tableau, j'aimerais qu'il y est des champs libre et si possible, que se tableau s'affiche directement dans la page où les cases à cocher se trouve.

Exemple :

Nom : Image2.png
Affichages : 1335
Taille : 27,6 Ko

Nom : Image2.png
Affichages : 1335
Taille : 27,6 Ko

Merci

**darkstar123456** · 11/07/2014, 14h40

Bonjour,

Cela me parait relativement simple si j'ai bien compris.

En réalité, il s'agit d'un tableau de marque, et des types de produits vendus. Il faut donc diviser les checboxes en 2 (marque & type de produit) et ensuite les parcourir pour créer le tableau.

Les checkboxes :

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
 
<h2>Les marques</h2>
<label>
<input type="checkbox" name="marque[]" name="kinder" />
Kinder
</label>
<label>
<input type="checkbox" name="marque[]" name="milka" />
Kinder
</label>
 
<h2>Les produits</h2>
<label>
<input type="checkbox" name="produit[]" name="bonbon" />
Kinder
</label>
<label>
<input type="checkbox" name="produit[]" name="chocolat" />
Kinder
</label>

Et enfin, récupérer les valeurs au submit() pour les afficher :

Code javascript :

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
 
$('form').submit(function(e) {
        e.preventDefault();
        // Y'a une manière plus propre d'écrire des tableaux et d'y ajouter des lignes, mais de tête je m'en souviens pas
        // Je chercherai afin d'éditer ma réponse, mais celle-ci est visuellement plus compréhensible donc je la met quand même :$
        var table = "<tr><th>&nbsp;</th>";
        $('input[name^=produit]:checked').each(function(k, v) {
            table = table + "<th>" + $(v).val() + "</th>";
        });
        table = table + "</tr>";
        // Marques
        $('input[name^=marque]:checked').each(function(k, v) {
            table = table + "<tr><th>" + $(v).val() + "</th>";
            $('input[name^=produit]:checked').each(function(k, v) {
                table = table + "<td><input type='text' placeholder='à remplir' /></td>";
            });
        });
        $('#table-container').html(table);
        return false;
    });

DEMO : http://tests.developer-tricks.com/?f=js_table_construct

**mitsukk1992** · 11/07/2014, 15h43

Merci beaucoup de ta réponse, oui c'est ça que je cherche mais quand je fais un copier coller de ton code je n'arrive pas à avoir de résultat (je débute en javascript) :

Mon fichier HTML : site.html

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
<html>
<head>
	<meta charset="utf-8" />
	<title>Information</title>
</head>
<body>
	<script src="java.js"></script>
	<h2>Les marques</h2>
	<label>
		<input type="checkbox" name="marque[]" name="kinder" />
		Kinder
	</label>
	<label>
		<input type="checkbox" name="marque[]" name="milka" />
		Milka
	</label>
	<h2>Les produits</h2>
	<label>
		<input type="checkbox" name="produit[]" name="bonbon" />
		Bonbon
	</label>
	<label>
		<input type="checkbox" name="produit[]" name="chocolat" />
		Chocolat
	</label>
	<p><input type="submit" value="submit" name ="submit" /></p>
</body>
</html>

Mon fichier JAVASCRIPT : java.js

Code javascript :

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
$('form').submit(function(e) {
        e.preventDefault();
        // Y'a une manière plus propre d'écrire des tableaux et d'y ajouter des lignes, mais de tête je m'en souviens pas
        // Je chercherai afin d'éditer ma réponse, mais celle-ci est visuellement plus compréhensible donc je la met quand même :$
        var table = "<tr><th>&nbsp;</th>";
        $('input[name^=produit]:checked').each(function(k, v){
            table = table + "<th>" + $(v).val() + "</th>";
        });
        table = table + "</tr>";
        // Marques
        $('input[name^=marque]:checked').each(function(k, v){
            table = table + "<tr><th>" + $(v).val() + "</th>";
            $('input[name^=produit]:checked').each(function(k, v) {
                table = table + "<td><input type='text' placeholder='à remplir' /></td>";
            });
        });
        $('#table-container').html(table);
        return false;
});

**darkstar123456** · 11/07/2014, 15h53

Effectivement, j'ai modifié mon code dans la démo et oublié de le faire ici dans le post.

Il manque la table où ajouter les éléments. Donc là où tu souhaites que ton tableau s'affiche (en dessous du formulaire à priori), il suffit d'ajouter la table, avec les classes de ton, seul l'ID est important car il faut que celui du JS et de l'HTML correspondent :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<table id="#table-container" class="tu-peux-mettre des-trucs ici si-tu-veux"></table>

**Bovino** · 11/07/2014, 16h09

Attention.
Un input ne peut pas avoir plusieurs attributs name et un id ne doit pas commencer par #.

**mitsukk1992** · 11/07/2014, 16h10

Merci pour ta patiente,

Je n'arrive toujours pas à faire fonctionner mon code

, j'ai mis la dernière ligne que tu m'as donné à la fin de mon formulaire comme tu me l'as dit.

Mon fichier PHP : site.php

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
<html>
<head>
	<meta charset="utf-8" />
	<title>Information</title>
</head>
<body>
	<script src="java.js"></script>
	<h2>Les marques</h2>
	<label>
		<input type="checkbox" name="marque[]" name="kinder" />
		Kinder
	</label>
	<label>
		<input type="checkbox" name="marque[]" name="milka" />
		Milka
	</label>
	<h2>Les produits</h2>
	<label>
		<input type="checkbox" name="produit[]" name="bonbon" />
		Bonbon
	</label>
	<label>
		<input type="checkbox" name="produit[]" name="chocolat" />
		Chocolat
	</label>
	<p><input type="submit" value="submit" name ="submit" /></p>
	<table id="#table-container" class=""></table>
</body>
</html>

Mon fichier Javascript : java.js

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
18
19
$('form').submit(function(e) {
        e.preventDefault();
        // Y'a une manière plus propre d'écrire des tableaux et d'y ajouter des lignes, mais de tête je m'en souviens pas
        // Je chercherai afin d'éditer ma réponse, mais celle-ci est visuellement plus compréhensible donc je la met quand même :$
        var table = "<tr><th>&nbsp;</th>";
        $('input[name^=produit]:checked').each(function(k, v){
            table = table + "<th>" + $(v).val() + "</th>";
        });
        table = table + "</tr>";
        // Marques
        $('input[name^=marque]:checked').each(function(k, v){
            table = table + "<tr><th>" + $(v).val() + "</th>";
            $('input[name^=produit]:checked').each(function(k, v) {
                table = table + "<td><input type='text' placeholder='à remplir' /></td>";
            });
        });
        $('#table-container').html(table);
        return false;
});

**SpaceFrog** · 11/07/2014, 16h58

tu as linké jquery ?

**Watilin** · 11/07/2014, 18h56

Toujours persuadé que jQuery est un piège vicieux pour les débutants, je propose une solution 100% pur JS, compatible IE9+ (en plus des autres navigateurs, évidemment) :

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang=fr>
<head>
   <meta charset=utf-8>
   <title>Générer un tableau à partir de cases à cocher</title>
   <style>
 
form { margin: 1em; }
 
table { border-collapse: collapse; }
 
th { background: silver; }
th, td { padding: 0.25em 1em;
         border: solid thin gray; }
td:empty { border: none; }
 
input[type=text] { border: solid thin silver;
                   border-radius: 2px;
                   box-shadow: inset 1px 1px 2px -1px #999;
                   color: black;
                   background: white; }
 
   </style>
   <script> 'use strict';
 
// polyfill léger pour Array.forEach
if (!('forEach' in Array)) {
   Array.forEach = function(iterable, callback, context) {
      Array.prototype.forEach.call(iterable, callback, context);
   };
}
 
function updateTable() {
   var $container = document.getElementById('table-container');
   $container.innerHTML = '';
 
   // voilà une manière plus propre d'écrire des tableaux…
   var $table = document.createElement('table');
 
   // produits
   var nProduits = 0;
   var $headRow = $table.createTHead().insertRow(-1);
   $headRow.insertCell(-1);
   Array.forEach(
      document.querySelectorAll('input[name="produit[]"]'),
      function($input) {
         if (!$input.checked) return;
         nProduits++;
         var $th = document.createElement('th');
         $th.textContent = $input.value;
         $headRow.appendChild($th);
      }
   );
 
   // marques
   var nMarques = 0;
   var $tbody = $table.createTBody();
   Array.forEach(
      document.querySelectorAll('input[name="marque[]"]'),
      function($input) {
         if (!$input.checked) return;
         nMarques++;
         var $row = $tbody.insertRow(-1);
         var $th = document.createElement('th');
         $th.textContent = $input.value;
         $row.appendChild($th);
 
         var $text = document.createElement('input');
         $text.type = 'text';
         $text.placeholder = 'À compléter…';
 
         for (var i = 0; i < nProduits; i++) {
            $row.insertCell(-1).appendChild($text.cloneNode());
         }
      }
   );
 
   $container.appendChild($table);
}
 
document.addEventListener('DOMContentLoaded', function() {
   updateTable();
 
   document.addEventListener('change', function(changeEvent) {
      var $target = changeEvent.target;
      if ('INPUT' === $target.tagName && 'checkbox' === $target.type) {
         updateTable();
      }
   });
});
 
   </script>
</head>
<body>
 
<form>
   <section>
      <h2>Les marques</h2>
      <label>
         <input type="checkbox" name="marque[]" value="kinder" />
         Kinder
      </label>
      <label>
         <input type="checkbox" name="marque[]" value="milka" />
         Milka
      </label>
   </section>
 
   <section>
      <h2>Les produits</h2>
      <label>
         <input type="checkbox" name="produit[]" value="bonbon" />
         Bonbon
      </label>
      <label>
         <input type="checkbox" name="produit[]" value="chocolat" />
         Chocolat
      </label>
   </section>
</form>
 
<section id="table-container"></section>
 
</body>
</html>

**Bovino** · 11/07/2014, 19h52

Toujours persuadé que jQuery est un piège vicieux pour les débutants

Entièrement d'accord. Surtout quand on appelle son fichier JavaScript java.js !

**darkstar123456** · 12/07/2014, 11h17

Envoyé par Bovino

Attention.
Un input ne peut pas avoir plusieurs attributs name et un id ne doit pas commencer par #.

Ouais, effectivement, j'ai écrit ça à la va-vite en faisant plein de copier/coller... le 2ième "name" devrait en fait être un attribut "value" !
Il est donc plus que probable que le fait que ça ne fonctionne pas provienne de là.
Chose étrange, je pensais avoir copié/collé le code de ma démo mais ce n'est pas le cas vu que sur cette dernière tout fonctionne et je n'ai pas fait l'erreur du double attribut "name"

Voici donc un rappel du lien de la démo : http://tests.developer-tricks.com/?f=js_table_construct

Et voici le code HTML du formulaire :

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
<form method="post" action="/" class="form-horizontal">
        <div class="form-group">
            <h2>Les marques</h2>
            <div class="checkbox checkbox-inline">
                <label>
                    <input type="checkbox" name="marque[]" value="Kinder">
                    Kinder
                </label>
            </div>
            <div class="checkbox checkbox-inline">
                <label>
                    <input type="checkbox" name="marque[]" value="Milka">
                    Milka
                </label>
            </div>
        </div>
 
        <div class="form-group">
            <h2>Les produits</h2>
            <div class="checkbox checkbox-inline">
                <label>
                    <input type="checkbox" name="produit[]" value="Bonbon">
                    Bonbon
                </label>
            </div>
            <div class="checkbox checkbox-inline">
                <label>
                    <input type="checkbox" name="produit[]" value="Chocolat">
                    Chocolat
                </label>
            </div>
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-primary">Valider</button>
        </div>
    </form>

L'attribut "value" est très important vu que c'est lui qui va définir tous les <th> (colonnes pour les produits, lignes pour les marques) !!

Concernant le JS pur ok mais définitivement pas dans le head...

**mitsukk1992** · 12/07/2014, 21h12

Woaw merci pour toute vos réponses !
Oui je débute en programmation web et oui j'ai appelé mon fichier "java.js" mais je ne pense pas que cela soit une raison pour le souligner Bovino.

Merci à Watilin et à darkstar123456 pour votre aide précieuse.

J'ai réussi à faire fonctionner ton code darkstar123456 mais il m'affiche des "on" à la place des noms de marques ou des noms des produits :

Nom : Sans titre.png
Affichages : 1082
Taille : 7,3 Ko

Nom : Sans titre.png
Affichages : 1082
Taille : 7,3 Ko

Le code de Watilin est exactement ce que je recherche (le tableau ce génère sans appuyer sur un bouton valider) mais je ne comprends strictement rien au code (sauf la partie HMTL, je ne savais même pas qu'il était possible de combiner HTML, CSS et JS dans un même fichier c'est pour dire).

Si une âme charitable pouvais m'expliquer le code ça serait parfait, dans tous les cas, un grand merci à nouveau

.

**darkstar123456** · 12/07/2014, 21h24

En effet, comme je l'ai précisé plus haut, l'attribut value des checkbox est très important car c'est lui qui permet d'afficher les noms des lignes et des colonnes.
La valeur d'une checkbox cochée est par défaut "on", tu as donc du oublier de préciser la valeur des checkbox.
Il suffit donc de l'ajouter pour chaque checkbox :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<input type="checkbox" name="marque[]" value="Kinder">
<input type="checkbox" name="marque[]" value="Milka">
<input type="checkbox" name="produit[]" value="Bonbon">
<input type="checkbox" name="produit[]" value="Chocolat">
etc...

Concernant le "java.js", je trouve également ce nom assez mal choisi vu que Java & Javascript sont deux langages mais très différents l'un de l'autre. Personnellement, j'aime bien appeler mon fichier principal "_app.js" => il a l'avantage de comporter un underscore et de commencer par A donc de se retrouver en tête de listing de fichier peu importe le logiciel utilisé ;-)

PS: je fais pareil pour mes CSS => _app.css & _app_responsive.css ;-)

**mitsukk1992** · 12/07/2014, 21h32

Merci darkstar123456 ça marche bien à présent !

Merci aussi pour la notation des fichiers, il est vrai que cela est plus pratique

.

**Watilin** · 14/07/2014, 17h31

Envoyé par mitsukk1992

Si une âme charitable pouvais m'expliquer le code ça serait parfait

Mais volontiers

Tout repose sur addEventListener, qui permet d'ajouter ce qu'on appelle ça des gestionnaires d'évènement. Ce ne sont rien de plus que des fonctions qu'on « attache » à un évènement sur un élément HTML. Ici on a :

L'évènement 'DOMContentLoaded' sur l'objet document, c'est une sorte de window.onload en mieux
L'évènement change qui est lancé quand une checkbox change d'état (entre autres). En surveillant le document entier, on n'est pas obligé d'attacher un gestionnaire différent pour chaque checkbox. Mais du coup il faut vérifier que la cible de l'évènement event.target correspond à ce qu'on veut.

Ensuite j'ai utilisé document.querySelectorAll qui permet de récupérer des éléments avec un sélecteur CSS, et Array.forEach qui permet d'utiliser une fonction comme une boucle for. Si je fais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Array.forEach(collection, fonction)

la fonction est appellée pour chaque élément de la collection, et elle reçoit l'élément comme 1er argument.

**mitsukk1992** · 15/07/2014, 13h27

Merci pour les explications

Comme je n'avais pas bien compris ton code je me suis aidé d'internet pour faire ça :

http://jsfiddle.net/4HsNL/1/

Au final j'aimerais un résultat comme ça :

http://www.noelshack.com/2014-29-1405419162-image1.png

Comme le montre l'image ci-dessus, je coche certaines cases et les parties encadrés en rouge apparaissent (comme pour ton tableau).

Le problème avec mon code est que :

Quand Research ou Commercial (ou les deux) pour le End User, ne sont pas coché, les champs de textes et les écritures dans le tableau s'en vont mais la ligne reste, j'aimerais que le tableau s'affiche sans espace blanc (que la ligne ne reste pas donc).

J'aimerais aussi que les cases Research et Commercial qui appartiennent au End User dépendent de celui-ci, en gros si le End User n'es PAS coché tandis que ses caractéristiques "Research" et "Commercial" le sont, ces caractéristiques ne s'affiche pas dans le tableau (la partie End User n'est pas affiché).

Et j'ai cette ligne qui gène :

http://www.noelshack.com/2014-29-140...sans-titre.png

J'aimerais un résultat comme le montre l'exemple mais avec ton code, c'est possible ?

**darkstar123456** · 15/07/2014, 14h18

Je vais commencer par le second problème parce que c'est le plus simple :

vous avez sûrement écrit ceci :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<table>
     <tr>
          <th></th>
          <th></th>
          <th>Member</th>
          <th>Non-member</th>
     </tr>
</table>

Il suffit de remplacer les 2 premiers <th></th> par : <th colspan="2">. Ca donnerait ceci :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<table>
     <tr>
          <th colspan="2"></th>
          <th>Member</th>
          <th>Non-member</th>
     </tr>
</table>

Pour le premier problème, il "suffit" de mettre en langage de programmation ce que vous avez écrit. Difficile de dire avec précision quel code fonctionnera, je vais donc mettre un code d'exemple +/- arbitraire :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
if ($('#var').is(':checked')) {
      // la checkbox est cochée, vous pouvez donc afficher la ligne.
}
if ($('#var').is(':checked') && $('#var2').is(':checked')) {
     // si les 2 checkboxes sont cochées, vous pouvez afficher la ligne.
}

Une information plus complète sur les différentes façon de vérifier qu'une checkbox est cochée : http://jquery-howto.blogspot.be/2013...x-checked.html