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

**solo190** · 25/05/2017, 14h44

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 html :

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

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 :

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

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

**Kennel sébastien** · 25/05/2017, 16h40

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

Une base est :

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

**danielhagnoul** · 25/05/2017, 23h03

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

**solo190** · 30/05/2017, 00h32

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.

**solo190** · 30/05/2017, 00h47

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 .

**Kennel sébastien** · 30/05/2017, 09h35

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.

**melka one** · 30/05/2017, 09h53

jour

un debut de fonction

Code :

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

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é')
	}
}

**solo190** · 03/06/2017, 11h47

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 :

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

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 :

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

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.

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

JavaScript

Discussions similaires

Partager

Partager