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 : 1340
Taille : 27,6 Ko

Nom : Image2.png
Affichages : 1340
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 #.

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

Générer un tableau à partir de checkbox

jQuery

Vue hybride

Discussions similaires

Partager

Partager