Générer un tableau à partir de checkbox

Version imprimable

11/07/2014, 10h29
mitsukk1992

1 pièce(s) jointe(s)

Générer un tableau à partir de checkbox

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 :

Pièce jointe 150916

Merci

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:

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:

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

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:

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:

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;
});

11/07/2014, 15h53
darkstar123456

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:

<table id="#table-container" class="tu-peux-mettre des-trucs ici si-tu-veux"></table>
11/07/2014, 16h09
Bovino

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

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:

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:

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;
});

11/07/2014, 16h58
SpaceFrog

tu as linké jquery ?

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:

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>

11/07/2014, 19h52
Bovino

Citation:

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 !

Citation:

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" :oops:

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:

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

12/07/2014, 21h12
mitsukk1992

1 pièce(s) jointe(s)

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 :

Pièce jointe 151033

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

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:

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

12/07/2014, 21h32
mitsukk1992

Merci darkstar123456 ça marche bien à présent !

Merci aussi pour la notation des fichiers, il est vrai que cela est plus pratique :) .
14/07/2014, 17h31
Watilin
Citation:

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:

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.
15/07/2014, 13h27
mitsukk1992

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 ?

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

vous avez sûrement écrit ceci :
Code:

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:

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:

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

16/07/2014, 11h10
mitsukk1992

Merci mais j'ai encore des problèmes au niveau de l'affichage du tableau
16/07/2014, 11h44
darkstar123456

Citation:

Envoyé par mitsukk1992

Merci mais j'ai encore des problèmes au niveau de l'affichage du tableau

Ha oui, je vois ! Alors c'est simple... Hum en fait non, j'ai raté ma formation de devin :(