Discussion :

[javast]

Bonjour à tous,

J'ai un calendrier en html vous pouvez voir le résultat ici http://www.developpez.net/forums/d15...leau-2d-bd/que

Je voudrais maintenant récupérer la valeur des (X,Y) de toutes les checkbox coché.
voici mon code, qui m'affiche pour l'instant que la valeur de la ligne gauche (des jours).

Code :

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

1
2
3
4
5
6
7
 
$('.mytable').find('tr').each(function () {
        var row = $(this);
        if (row.find('input[type="checkbox"]').is(':checked')){
            console.log(row.children('th').text());
        }
    });

Ce que je cherche est pour chaque checkbox cochée récupérer le jour (ligne gauche) et la période (ligne en haut) .

Merci à vous

[SpaceFrog]

Code :

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

1
2
3
4
5
6
$('.mytable').find('tr').each(function () {
        var row = $(this);
        row.find('input[type="checkbox"]:checked').each( function(){
            console.log(row.children('th').text());
        })
    });

Code :

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

row.find('input[type="checkbox"]:checked').each( function(){

peut devenir

Code :

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

row.find(':checkbox:checked').each( function(){

ou si il n'y a que des checkboxes ...

Code :

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

row.find(':checked').each( function(){

pour le th a afficher ... faudrait connaitre la structure du html et recupérer le eq()

[javast]

Merci pour votre réponse.

Voici mon html, jusqu’à présent j’arrive à récupérer la valeur des jours mais pas des périodes.

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
20
21
22
23
24
25
 
<table class="table mytable">
       <thead>
           <tr>
               <th></th>
                   @foreach($periodes as $periode)
                        <th id="{{$periode->id}}">{{$periode->nom}}</th>
                    @endforeach
            </tr>
      </thead>
       <tbody>
             @foreach($jours as $jour)
                   <tr>
                       <th id="{{$jour->id}}">{{$jour->nom}}</th>
                       <td class="center"><input name="value" type="checkbox" class="icheckbox"/></td>
                       <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                       <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                       <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                       <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                       <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                        <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                     </tr>
               @endforeach
         </tbody>
 </table>

Merci.

[SpaceFrog]

non ce n'est pas du html ...
fournis nous plutôt le html généré

[javast]

Ca non ?

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
<table  class="mytable">
                        <thead>
                            <tr>
                                <th  id="1"></th>
                                <th  id="2">P.M</th>
                                <th  id="3">Mat.</th>
                                <th  id="4">Midi</th>
                                <th  id="5">A.M.</th>
                                <th  id="6">P.S.</th>
                                <th  id="7">Soir</th>
                                <th  id="8">Nuit</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th  id="1">Lundi</th>
                                <td class="center"><input name="value" type="checkbox" class="icheckbox"/></td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                            </tr>
                            <tr>
                                <th  id="2">Mardi</th>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/></td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                            </tr>
                            <tr>
                                <th  id="3">Mercredi</th>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/></td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  name="value"  type="checkbox" class="icheckbox"/> </td>
                            </tr>
                            <tr>
                                <th  id="4">Jeudi</th>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/></td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                            </tr>
                            <tr>
                                <th  id="5">Vendredi</th>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/></td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                            </tr>
                            <tr>
                                <th  id="6">Samedi</th>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/></td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                            </tr>
                            <tr>
                                <th  id="7">Dimanche</th>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/></td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  name="value"  type="checkbox" class="icheckbox"/> </td>
                                <td class="center"><input name="value"  type="checkbox" class="icheckbox"/> </td>
                            </tr>
 
                       </tbody>
                   </table>

[SpaceFrog]

en gros un truc comme ça :
http://jsfiddle.net/aud4dhbh/

[SpaceFrog]

Une autre possibilité plus simple serait de passer par des data-h des input, plus simple au lieu de récupérer l'indexe du tr...

[javast]

Merci pour ta réponse, par contre ça marche pas dans mon cas, et quand je fais inspecter l'élément avec Chrome je vois ça

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
<table style="width: auto;" class="mytable">
       <thead>
                  <tr>
                      <th></th>
                         <th id="1">P.M</th>
                         <th id="2">Mat</th>
                         <th id="3">Midi</th>
                         <th id="4">A.M</th>
                         <th id="5">P.S</th>
                         <th id="6">Soir</th>
                         <th id="7">Nuit</th>
                    </tr>
       </thead>
     <tbody>
              <tr>
                 <th id="1">Lundi</th>
                     <td class="center"><div class="icheckbox_minimal-grey checked" style="position: relative;"><input name="value" type="checkbox" class="icheckbox" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins></div></td>
                     <td class="center"><div class="icheckbox_minimal-grey" style="position: relative;"><input name="value" type="checkbox" class="icheckbox" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins></div> </td>
                      <td class="center"><div class="icheckbox_minimal-grey" style="position: relative;"><input name="value" type="checkbox" class="icheckbox" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins></div> </td>
                      <td class="center"><div class="icheckbox_minimal-grey" style="position: relative;"><input name="value" type="checkbox" class="icheckbox" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins></div> </td>
                      <td class="center"><div class="icheckbox_minimal-grey" style="position: relative;"><input name="value" type="checkbox" class="icheckbox" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins></div> </td>
                      <td class="center"><div class="icheckbox_minimal-grey" style="position: relative;"><input name="value" type="checkbox" class="icheckbox" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins></div> </td>
                      <td class="center"><div class="icheckbox_minimal-grey" style="position: relative;"><input name="value" type="checkbox" class="icheckbox" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; opacity: 0; background: rgb(255, 255, 255);"></ins></div> </td>
                      <td class="center"><input name="comment" type="text"> </td>
                   </tr>
                     <!-- idem pour le reste des jours -->
 
                      </tbody>
                   </table>

[SpaceFrog]

Heu ben c'est toi qui a fourni le html plus haut ... ce n'est pas le bon ???

[javast]

Non c'était pas le bon, je m’excuse

[SpaceFrog]

Avec le nouveau code HTML ()
https://jsfiddle.net/aud4dhbh/4/

[javast]

Ça marche, merci beaucoup