Récupérer ligne cochée dans un tableau

Version imprimable

bonjour a tous et toutes,
j'ai mis sur pied un tableau qui a un chekbox que je rempli sans probleme je souhaite avoir les lignes coché par l'utilisateur pour continuer mon traitement .
voici comment je fais mon tableau

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<table id="mytable" class="table table-striped table-bordered table-list">
                        <thead>
 
                            <th class="hidden-xs">Nom</th>
                            <th class="col-text">Prenoms</th>
                            <th class="col-text">Telephone</th>
                            <th class="hidden-xs">Email</th>
                            <th class="hidden-xs">Choix</th>
 
                        </tr>
                        </thead>
 
                    </table>

voici comment je le rempli

Code:

1
2
3
4
5
for(i=0;i<=donnee.length;i++)
                        {
                        document.getElementById('mytable').innerHTML+='<tr><td>'+donnee[i].nom+'</td><td>'+donnee[i].prenoms+'</td><td>'+donnee[i].telephone+'</td><td>'+donnee[i].email+'</td><td><input type="checkbox" name="check"></td> </tr>';  
 
                        }

s'il vous plait aider moi a retrouver les ligne coché j'ai cherche partout sans sucees.
merci d'avance

Tu détectes tes lignes au moment où tu cliques sur la case…

Une base est :

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
      var i, id;
      var nombre  = donnee.length;
      var cliques = [];
 
      for(i = 0; i <= nombre; ++i) {
          id = 'check' + i;
 
          document.getElementById('mytable').innerHTML += '<tr><td>'  + donnee[i].nom +
                                                          '</td><td>' + donnee[i].prenoms + 
                                                          '</td><td>' + donnee[i].telephone +
                                                          '</td><td>' + donnee[i].email +
                                                          '</td><td><input type="checkbox" name="check" id="' + id + '"></td></tr>';
 
 
          function clique() {
              var id = document.getElementById(id);
 
              return function() {
                  // Tes instructions
                  // Exemple
                  alert(id);
              };
          }
 
          cliques[i] = clique();
 
          document.getElementById(id).addEventListener('click', cliques[i]);
      }

:salut:

Vous ne dites pas :

à quel moment aura lieu le recueil des informations;
dans quel contexte il aura lieu (action de l'utilisateur ?);
comment seront stockées les informations recueillies.

Ci-dessous, un exemple en ES2015 (voir le nota bene dans ma signature) qui agit sur demande de l'utilisateur et qui stocke les informations dans un Array d'Array.

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
  <title>test</title>
  <style>
    * {
      box-sizing: border-box;
    }
    th, td {
      width: 10rem;
      border: 1pt dotted grey;
      padding: 0.3rem;
    }
  </style>
  <script>
    'use strict';
    
    document.addEventListener( "DOMContentLoaded", ev => {
      
    }, false );
    
    window.addEventListener( "load", ev => { 
      
      document.querySelector( "#btnCheck" ).addEventListener( "click", ev => {
        
        const
          elemTRs = Array.from( document.querySelectorAll( "#mytable > tbody> tr" ) ),
          elemTRsLength = elemTRs.length;
          
        let
          cells = Array.from( elemTRs[0].cells ),
          cellsLength = cells.length - 1, // sans input
          checked = false,
          arr = Array.from( new Array( elemTRsLength ), () => Array.from( new Array( cellsLength ), () => "" ) );
          
        for ( const [ i, item ] of elemTRs.entries() ){
          cells = Array.from( item.cells );
          checked = ( cells[ cells.length - 1 ] ).querySelector( "input[name='check']" ).checked;
          
          if ( checked === true ){
            for ( let j = 0; j < cellsLength; j++ ){
              arr[ i ][ j ] = cells[ j ].textContent;
            }
          }
        }
        
        console.table( arr );
        
      }, false );
      
    }, false );
  </script>
</head>
<body>
 
  <table id="mytable">
    <thead>
      <tr>
        <th>Nom</th>
        <th>Prenoms</th>
        <th>Telephone</th>
        <th>Email</th>
        <th>Choix</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
        <td>D1</td>
        <td>
          <input type="checkbox" name="check">
        </td>
      </tr>
      <tr>
        <td>A2</td>
        <td>B2</td>
        <td>C2</td>
        <td>D2</td>
        <td>
          <input type="checkbox" name="check">
        </td>
      </tr>
      <tr>
        <td>A3</td>
        <td>B3</td>
        <td>C3</td>
        <td>D3</td>
        <td>
          <input type="checkbox" name="check">
        </td>
      </tr>
    </tbody>
  </table>
 
  <button id="btnCheck">Collecter les informations (check)</button>
 
</body>
</html>

30/05/2017, 00h32
solo190

Merci a tous pour vos intervention,
dans la logique de ce que je souhaite faire, l utilisateur coche toute les cache dont il souhaite et ensuite il actionne sur boutton supprimer et c'est en ce moment que je recupere les index des lignes supprimer pour aller effectivement les supprimer dans la base de donnée.
30/05/2017, 00h47
solo190

s 'il te plait Kennel sébastien explique un peu ta logique et surtout si le recueil est a la fin , s'il doit cliquer un un bouton avant d'avoir toutes les case cochées.
merci d'avance .
30/05/2017, 09h35
Kennel sébastien

Hum, faut le dire au départ que ton action se déclenche au niveau du bouton…

C'est beaucoup plus facile, il te suffit de parcourir tes cases et de vérifier celle qui sont cochées.

Donc tu cibles le tableau par son id puis les cases par le nom et type, enfin il reste plus cas tester la propriété « checked » de chaque case.

jour

un debut de fonction

Code:

1
2
3
4
5
6
7
8
9
var ts=document.getElementById('mytable');
 
for  (var i=0;i<ts.rows.length;i++){
 
	if(ts.rows[i].getElementsByTagName('input')[0].checked){
 
		alert('la colone '+ i+' est coché')
	}
}

Bonjour a tous,
je commence par vous remercie , j'ai reussi à avoir les index des lignes cochées avec votre aide et actuellement je dois recuperer le numero de telephone de la cellule correspondante ce que j'essaye depuis sans succes.

Code:

1
2
3
4
5
6
for(i=0;i<=donnee.length;i++)
                        {
                        // document.getElementById('mytable').innerHTML+='<tr><td>'+donnee[i].nom+'</td><td>'+donnee[i].prenoms+'</td><td id="telephone">'+donnee[i].telephone+'</td><td>'+donnee[i].email+'</td><td><input type="checkbox" id="check" name="check"></td> </tr>';
                        document.getElementById('mytable').innerHTML+='<tr><td>'+donnee[i].nom+'</td><td>'+donnee[i].prenoms+'</td><td><output id="telephone">'+donnee[i].telephone+'</td><td>'+donnee[i].email+'</td><td><input type="checkbox" id="check" name="check"></td> </tr>';    
 
                        }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 function suprimer(){
 
    var table = document.getElementById("mytable");
    checkbox = table.getElementsByTagName("input");
    telephone=table.getElementsByTagName("output");
 
    for(var indexCheckbox = 0; indexCheckbox<checkbox.length; indexCheckbox++){
        if(checkbox[indexCheckbox].checked){
        alert('la case ' + indexCheckbox + ' est coché');
        alert('le numero de telephone correspondant est :'+ table[indexCheckbox].telephone)
        }
    }
 
     }

une fois de plus merci de votre aide.