Ajouter/Dupliquer une ligne de tableau HTML

Version imprimable

Voir 40 message(s) de cette discussion en une page

1 pièce(s) jointe(s)

Là je tente avec du jQuery, la duplication en elle-même fonctionne toujours. Concernant l'incrémentation je suis entrain de la travailler sur les boutons radio, et rien que là ça me pose un léger problème. Voilà ce que j'ai fais en HTML :

Code:

1
2
3
4
5
6
7
8
9
<td class="tabPrix" id="tabPrix">
                                <INPUT type= "radio" name="typeTarif[]" id="typeTarif" class="typeTarif" value="Gratuit" 
                                        onclick="Javascript:choixTarif()">Gratuit</br>
                                <INPUT type= "radio" name="typeTarif[]" id="typeTarif" class="typeTarif" value="Payant" 
                                        onclick="Javascript:choixTarif()">Payant</br>
                                <div id="prix" style="display:none">
                                    <input type="text" name="prixText" id="prixText"><label>€</label>
                                </div>
                            </td>

Et voilà ce que j'ai fais en jQuery :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
$('.btn_add_row').click(function () {
 
                        $('#tarifTable tbody').append($('#tarifTable tbody tr:last').clone());
 
                        $('#tarifTable tr').each(function (i) {
                            var radio = $(this).find('#typeTarif');
 
                            radio.eq(0).attr('name', 'typeTarif' + i);
 
                            i++;
                         });
 
                    });

Et voilà ce que ça fait :

Pièce jointe 280668

Pas ultra différent du problème d'hier mais avec une différence cependant :

Code:

1
2
3
4
5
6
7
<td class="tabPrix" id="tabPrix">
                                <input type="radio" name="typeTarif1" id="typeTarif" class="typeTarif" value="Gratuit" onclick="Javascript:choixTarif()">Gratuit<br>
                                <input type="radio" name="typeTarif[]" id="typeTarif" class="typeTarif" value="Payant" onclick="Javascript:choixTarif()">Payant<br>
                                <div id="prix" style="display: none;">
                                    <input type="text" name="prixText" id="prixText"><label>€</label>
                                </div>
                            </td>

L'incrémentation a fonctionné, mais seulement sur le premier "typeTarif" !

30/05/2017, 10h50
SpaceFrog

a priori pas besoin d'incrémenter le name ... il peut y avoir plusieurs names identiques sur la page...

par contre l'id, oui il faut incrémenter

C'est ce que je tente de faire, mais hélas ça ne marche pas :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$('.btn_add_row').click(function () {
 
                        $('#tarifTable tbody').append($('#tarifTable tbody tr:last').clone());
 
                        $('#tarifTable tr').each(function (i) {
                            var radio1 = $(this).find('#prixG');
                            var radio2 = $(this).find('#prixP');
                            var radio3 = $(this).find('#prix');
 
 
                            radio1.eq(0).attr('id', 'prixG' + i);
                            radio2.eq(0).attr('id', 'prixP' + i);
                            radio3.eq(0).attr('id', 'prix' + i);
 
                            i++;
                         });
 
                    });

Enfin peut-être que je fais n'imp avec .attr()

30/05/2017, 11h31
SpaceFrog

le problème reste le même

Code:

var radio1 = $(this).find('#prixG');

modifie l'id avant de faire un append ...

Ca c'est bon :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$('.btn_add_row').click(function () {
 
                        $('#tarifTable tbody').append($('#tarifTable tbody tr:last').clone());
 
                        $('#tarifTable tr').each(function (i) {
                            var radio1 = $(this).find('.typeTarif1');
                            var radio2 = $(this).find('.typeTarif2');
                            var radio3 = $(this).find('.prix');
                            var radio4 = $(this).find('.prixText');
 
                            radio1.eq(0).attr('id', 'prixG' + i);
                            radio1.eq(0).attr('name', 'typeTarif' + i);
                            radio2.eq(0).attr('id', 'prixP' + i);
                            radio2.eq(0).attr('name', 'typeTarif' + i);
                            radio3.eq(0).attr('id', 'prix' + i);
                            radio4.eq(0).attr('id', 'prixText' + i);
 
                            i++;
                         });
 
                    });

Maintenant les boutons radio ne font plus n'imp et l'incrémentation se fait !

Code:

1
2
3
4
5
6
7
<td class="tabPrix" id="tabPrix">
                                <input type="radio" name="typeTarif1" id="prixG1" class="typeTarif1" value="Gratuit" onclick="Javascript:choixTarif()">Gratuit<br>
                                <input type="radio" name="typeTarif1" id="prixP1" class="typeTarif2" value="Payant" onclick="Javascript:choixTarif()">Payant<br>
                                <div id="prix1" class="prix" style="display:none">
                                    <input type="text" name="prixText" class="prixText" id="prixText1"><label>€</label>
                                </div>
                            </td>

Maintenant j'ai juste à résoudre le problème du JS qui permet d'afficher un champ text lorsque je sélectionne le bouton radio "Payant" :

Code:

1
2
3
4
5
6
function choixTarif(){
                                    if (document.ajoutCourse.typeTarif.value == "Payant")
                                        document.getElementByClassName("prix[]").style.display = "inline-table";
                                    else
                                        document.getElementByClassName("prix[]").style.display = "none";
                                }

Vraiment là je bloque, j'ai tenté de faire un truc comme ça :
Code:

1 2 3 4 5 6 7 8 9 $('.typeTarif2').click(function (){ if ($('.typeTarif2').checked = true) $('.prix').show(); }); $('.typeTarif1').click(function (){ if ($('.typeTarif1').checked = true) $('.prix').hide(); });
Afin de pouvoir bien distinguer les deux boutons radio grâce à leur classe. Cependant, quand je duplique le second groupe de bouton radio ignore le jQuery et n'affiche ou ne cache pas le champ text. Par contre, le premier groupe affiche et cache le champ text de TOUTES les lignes :/

Code:

1
2
3
4
$('.typeTarif2').click(function (){
                        if ($(this).checked = true){  // le this limite à l'element clické 
                            $('.prix').show(); // peut être relativiser le selecteur avec un $(this).next('.prix').show(); }
                    });

31/05/2017, 10h13
Blackmoule

Merci pour ta réponse rapide encore une fois, mais malheureusement cela ne marche pas et empêche la duplication de se faire :/
31/05/2017, 10h17
Blackmoule

Autant pour moi, les accolades fermantes étaient en commentaire d'où le bug x)

Mais cela dit ça ne change rien, c'est toujours avec les boutons radio de la première ligne que le jQuery fonctionne :/
31/05/2017, 10h20
Blackmoule

Et avec :

Code:

$(this).next('.prix').show();

Le champ text ne s'affiche plus du tout :/
31/05/2017, 10h24
SpaceFrog

Code:

$(this).parent().find('.prix').show();
31/05/2017, 10h31
NoSmoking

Bonjour,
cela pourrait t’intéresser, j'avais présenté une méthode dans la discussion Insertion/Suppression d'une ligne d'une TABLE
31/05/2017, 10h33
Blackmoule

Merci, on progresse là !

Le changement ne se fait qu'à la première ligne désormais. Mais lorsque je duplique, la seconde ligne enregistre le choix fait dans la première et ne change pas. Par exemple, si j'ai choisi "Payant" dans la première ligne, le champ text restera afficher dans la seconde ligne peu importe le choix fait dans cette dernière ça ne bougera pas.

Encore merci, vous êtes d'une grande aide :D
31/05/2017, 10h57
SpaceFrog

https://jsfiddle.net/cxdwjfj0/
31/05/2017, 11h09
Blackmoule

SpaceFrog ton code est quasi parfait, juste un soucis : Les boutons radio ne sont pas indépendant entre les lignes :/ Mais ce que tu as fait est déjà énorme, merci beaucoup !

NoSmoking ta méthode est excellente en plus d'être plus élégante que la mienne. Mais j'ai un soucis avec les boutons radio de ton exemple : Là non plus ils ne sont pas indépendant entre les lignes. Dans ton dernier post tu as proposé une fonction qui permet de régler cela, cependant en l'utilisant la duplication ne marche plus :/
31/05/2017, 11h20
Blackmoule

Citation:

Envoyé par Blackmoule

NoSmoking ta méthode est excellente en plus d'être plus élégante que la mienne. Mais j'ai un soucis avec les boutons radio de ton exemple : Là non plus ils ne sont pas indépendant entre les lignes. Dans ton dernier post tu as proposé une fonction qui permet de régler cela, cependant en l'utilisant la duplication ne marche plus :/

Je retire, j'avais modifié le

Code:

document.getElementById();

ceci explique cela ^^"
31/05/2017, 11h53
SpaceFrog

Citation:

ne sont pas indépendant entre les lignes

c'est dire ?
31/05/2017, 11h58
Blackmoule

En gros, lorsque que je clique sur un bouton radio sur la ligne dupliquée, mon choix sur la première ligne disparu illico

Nom de Zeus ! J'ai réglé le soucis !

jQuery :

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
126
127
128
129
130
131
$('.btn_add_row').click(function () {
 
                            $('#tarifTable tbody').append($('#tarifTable tbody tr:last').clone());
 
                            $('#tarifTable tr').each(function (i) {
                                var radio1 = $(this).find('.typeTarif1');
                                var radio2 = $(this).find('.typeTarif2');
                                var radio3 = $(this).find('.prix');
                                var radio4 = $(this).find('.prixText');
 
                                var date         = $(this).find('.typeDate');
                                var choixDate1   = $(this).find('.choixDate1');
                                var choixDate2   = $(this).find('.choixDate2');
                                var choixDateD1a = $(this).find('.listD1_1');
                                var choixDateD2a = $(this).find('.listD1_2');
                                var choixDateD3a = $(this).find('.listD1_3');
                                var choixDateF1a = $(this).find('.listF1_1');
                                var choixDateF2a = $(this).find('.listF1_2');
                                var choixDateF3a = $(this).find('.listF1_3');
                                var choixDateD1b = $(this).find('.listD2_1');
                                var choixDateD2b = $(this).find('.listD2_2');
                                var choixDateD3b = $(this).find('.listD2_3');
                                var choixDateD4b = $(this).find('.listD2_4');
                                var choixDateD5b = $(this).find('.listD2_5');
                                var choixDateF1b = $(this).find('.listF2_1');
                                var choixDateF2b = $(this).find('.listF2_2');
                                var choixDateF3b = $(this).find('.listF2_3');
                                var choixDateF4b = $(this).find('.listF2_4');
                                var choixDateF5b = $(this).find('.listF2_5');
 
                                var lic      = $(this).find('.typeLic');
                                var addLic   = $(this).find('.ajoutLic');
                                var more     = $(this).find('.plus');
                                var less     = $(this).find('.moins');
                                var delAll   = $(this).find('.delAll');
                                var textLic  = $(this).find('.textLic');
 
                                var sexe     = $(this).find('.typeSex');
 
                                var naiss = $(this).find('.typeDateNaiss');
                                var naissAnnee = $(this).find('.anneeNaiss');
                                var naissAnneeJeune = $(this).find('.anneeJeune');
                                var naissAnneeVieux = $(this).find('.anneeVieux');
                                var naissCompl = $(this).find('.dateNaissCompl');
                                var naissJeuneJ = $(this).find('.listJ_1');
                                var naissJeuneM = $(this).find('.listJ_2');
                                var naissJeuneA = $(this).find('.listJ_3');
                                var naissVieuxJ = $(this).find('.listV_1');
                                var naissVieuxM = $(this).find('.listV_2');
                                var naissVieuxA = $(this).find('.listV_3');
 
                                var btnSave = $(this).find('.save');
                                var btnMod  = $(this).find('.mod');
                                var btnCanc = $(this).find('.cancel');
                                var btnDel  = $(this).find('.del');
                                var btn1    = $(this).find('.bt1');
                                var btn2    = $(this).find('.bt2');
 
                                radio1.eq(0).attr('id', 'prixG' + '_' + i);
                                radio1.eq(0).attr('name', 'typeTarif' + '_' + i);
                                radio2.eq(0).attr('id', 'prixP' + '_' + i);
                                radio2.eq(0).attr('name', 'typeTarif' + '_' + i);
                                radio3.eq(0).attr('id', 'prix' + '_' + i);
                                radio4.eq(0).attr('id', 'prixText' + '_' + i);
 
                                date.eq(0).attr('id', 'typeDate' + '_' + i);
                                choixDate1.eq(0).attr('id', 'dates' + '_' + i);
                                choixDate2.eq(0).attr('id', 'datesHeure' + '_' + i);
                                choixDateD1a.eq(0).attr('id', 'listJourD1' + '_' + i);
                                choixDateD2a.eq(0).attr('id', 'listMoisD1' + '_' + i);
                                choixDateD3a.eq(0).attr('id', 'listAnneeD1' + '_' + i);
                                choixDateF1a.eq(0).attr('id', 'listJourF1' + '_' + i);
                                choixDateF2a.eq(0).attr('id', 'listMoisF1' + '_' + i);
                                choixDateF3a.eq(0).attr('id', 'listAnneeF1' + '_' + i);
                                choixDateD1b.eq(0).attr('id', 'listJourD2' + '_' + i);
                                choixDateD2b.eq(0).attr('id', 'listMoisD2' + '_' + i);
                                choixDateD3b.eq(0).attr('id', 'listAnneeD2' + '_' + i);
                                choixDateD4b.eq(0).attr('id', 'listHeureD2' + '_' + i);
                                choixDateD5b.eq(0).attr('id', 'listMinuteD2' + '_' + i);
                                choixDateF1b.eq(0).attr('id', 'listJourF2' + '_' + i);
                                choixDateF2b.eq(0).attr('id', 'listMoisF2' + '_' + i);
                                choixDateF3b.eq(0).attr('id', 'listAnneeF2' + '_' + i);
                                choixDateF4b.eq(0).attr('id', 'listHeureF2' + '_' + i);
                                choixDateF5b.eq(0).attr('id', 'listMinuteF2' + '_' + i);
 
                                lic.eq(0).attr('id', 'typeLic' + '_' + i);
                                addLic.eq(0).attr('id', 'ajoutLic' + '_' + i);
                                more.eq(0).attr('id', 'plus' + '_' + i);
                                less.eq(0).attr('id', 'moins' + '_' + i);
                                delAll.eq(0).attr('id', 'delAll' + '_' + i);
                                textLic.eq(0).attr('id', 'textLic' + '_' + i);
 
                                sexe.eq(0).attr('id', 'typeSex' + '_' + i);
 
                                naiss.eq(0).attr('id', 'typeDateNaiss' + '_' + i);
                                naissAnnee.eq(0).attr('id', 'anneeNaiss' + '_' + i);
                                naissAnneeJeune.eq(0).attr('id', 'anneeJeune' + '_' + i);
                                naissAnneeVieux.eq(0).attr('id', 'anneeVieux' + '_' + i);
                                naissCompl.eq(0).attr('id', 'dateNaissCompl' + '_' + i);
                                naissJeuneJ.eq(0).attr('id', 'listJourJ' + '_' + i);
                                naissJeuneM.eq(0).attr('id', 'listMoisJ' + '_' + i);
                                naissJeuneA.eq(0).attr('id', 'listAnneeJ' + '_' + i);
                                naissVieuxJ.eq(0).attr('id', 'listJourV' + '_' + i);
                                naissVieuxM.eq(0).attr('id', 'listMoisV' + '_' + i);
                                naissVieuxA.eq(0).attr('id', 'listAnneeV' + '_' + i);
 
 
                                btnSave.eq(0).attr('id', 'save' + '_' + i);
                                btnMod.eq(0).attr('id', 'mod' + '_' + i);
                                btnCanc.eq(0).attr('id', 'cancel' + '_' + i);
                                btnDel.eq(0).attr('id', 'del' + '_' + i);
                                btn1.eq(0).attr('id', 'bt1' + '_' + i);
                                btn2.eq(0).attr('id', 'bt2' + '_' + i);
 
                                i++;
                             });
 
                        });
 
                        $("#tarifTable").on("click", "[id^=prixP]:checked", function() {
                            if ($(this).val() == "Payant") {
                                $(this).parent().find('.prix').show();
                            };
                        });
 
                        $("#tarifTable").on("click", "[id^=prixG]:checked", function() {
                            if ($(this).val() == "Gratuit") {
                                $(this).parent().find('.prix').hide();
                            };
                        });
                    })

Je pense qu'avec cette base je vais pouvoir tout refaire en mieux, merci beaucoup pour votre aide les gars !

Aller, un tout dernier problème après on est bon : Lorsque je clique sur "Enregistrer" cela est sensé bloquer toute possibilité de modification. Aucun problème avec la première ligne, c'est à partir du moment où l'on clique sur le bouton "Enregistrer" d'une ligne dupliquer que ça se complique. Là au lieu de bloquer les listes déroulantes et champs de la ligne, ça bloque ceux de toutes les lignes. Légèrement problématique. Voici le code pour bloquer et débloquer tout ça :

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
$("#tarifTable").on("click", "[id^=bt1]", function() {
                            if ($(".bt1").css("display") != "none"){
                                $('.bt1').hide();
                                $('.bt2').show();
                                $('.typeTarif1').prop('disabled', 'disabled');
                                $('.typeTarif2').prop('disabled', 'disabled');
                                $('.prixText').prop('disabled', 'disabled');
                                $('.typeDate').prop('disabled', 'disabled');
                                $('.anneeJeune').prop('disabled', 'disabled');
                                $('.anneeVieux').prop('disabled', 'disabled');
                                $('.listD1_1').prop('disabled', 'disabled');
                                $('.listD1_2').prop('disabled', 'disabled');
                                $('.listD1_3').prop('disabled', 'disabled');
                                $('.listF1_1').prop('disabled', 'disabled');
                                $('.listF1_2').prop('disabled', 'disabled');
                                $('.listF1_3').prop('disabled', 'disabled');
                                $('.listD2_1').prop('disabled', 'disabled');
                                $('.listD2_2').prop('disabled', 'disabled');
                                $('.listD2_3').prop('disabled', 'disabled');
                                $('.listD2_4').prop('disabled', 'disabled');
                                $('.listD2_5').prop('disabled', 'disabled');
                                $('.listF2_1').prop('disabled', 'disabled');
                                $('.listF2_2').prop('disabled', 'disabled');
                                $('.listF2_3').prop('disabled', 'disabled');
                                $('.listF2_4').prop('disabled', 'disabled');
                                $('.listF2_5').prop('disabled', 'disabled');
                                $('.typeLic').prop('disabled', 'disabled');
                                $('.plus').hide();
                                $('.moins').hide();
                                $('.delAll').hide();
                                $('.textLic').prop('disabled', 'disabled');
                                $('.typeSex').prop('disabled', 'disabled');
                                $('.typeDateNaiss').prop('disabled', 'disabled');
                                $('.anneeJeune').prop('disabled', 'disabled');
                                $('.anneeVieux').prop('disabled', 'disabled');
                                $('.listJ_1').prop('disabled', 'disabled');
                                $('.listJ_2').prop('disabled', 'disabled');
                                $('.listJ_3').prop('disabled', 'disabled');
                                $('.listV_1').prop('disabled', 'disabled');
                                $('.listV_2').prop('disabled', 'disabled');
                                $('.listV_3').prop('disabled', 'disabled');
                            }
                        });
 
                        $("#tarifTable").on("click", "[id^=bt2]", function() {
                            if ($(".bt1").css("display") == "none"){
                                $('.bt2').hide();
                                $('.bt1').show();
                                $('.typeTarif1').prop('disabled', '');
                                $('.typeTarif2').prop('disabled', '');
                                $('.prixText').prop('disabled', '');
                                $('.typeDate').prop('disabled', '');
                                $('.anneeJeune').prop('disabled', '');
                                $('.anneeVieux').prop('disabled', '');
                                $('.listD1_1').prop('disabled', '');
                                $('.listD1_2').prop('disabled', '');
                                $('.listD1_3').prop('disabled', '');
                                $('.listF1_1').prop('disabled', '');
                                $('.listF1_2').prop('disabled', '');
                                $('.listF1_3').prop('disabled', '');
                                $('.listD2_1').prop('disabled', '');
                                $('.listD2_2').prop('disabled', '');
                                $('.listD2_3').prop('disabled', '');
                                $('.listD2_4').prop('disabled', '');
                                $('.listD2_5').prop('disabled', '');
                                $('.listF2_1').prop('disabled', '');
                                $('.listF2_2').prop('disabled', '');
                                $('.listF2_3').prop('disabled', '');
                                $('.listF2_4').prop('disabled', '');
                                $('.listF2_5').prop('disabled', '');
                                $('.typeLic').prop('disabled', '');
                                $('.plus').show();
                                $('.moins').show();
                                $('.delAll').show();
                                $('.textLic').prop('disabled', '');
                                $('.typeSex').prop('disabled', '');
                                $('.typeDateNaiss').prop('disabled', '');
                                $('.anneeJeune').prop('disabled', '');
                                $('.anneeVieux').prop('disabled', '');
                                $('.listJ_1').prop('disabled', '');
                                $('.listJ_2').prop('disabled', '');
                                $('.listJ_3').prop('disabled', '');
                                $('.listV_1').prop('disabled', '');
                                $('.listV_2').prop('disabled', '');
                                $('.listV_3').prop('disabled', '');
                            }
                        });

Voir 40 message(s) de cette discussion en une page