Récupérer le nom du champ selectionné

**alexgo** · 03/03/2017, 18h45

Bonjour

j'ai un formulaire avec les champs d'une table dessus et je voudrais pouvoir faire détecter le nom du champ dans lequel je me trouve quand je clique sur une cellule d'un enregistrement

Merci

**mathieu** · 04/03/2017, 00h15

c'est faisable si vous utilisez par exemple jQuery

**NoSmoking** · 04/03/2017, 09h47

Bonjour,
même sans jQuery mais au préalable il faudrait savoir ce que tu entends par « le nom du champ dans lequel je me trouve quand je clique sur une cellule d'un enregistrement » !

**alexgo** · 04/03/2017, 10h23

Bonjour et merci à vous

ce que j'appelle le nom du champs c'est le nom de l'entete de colonne du champs de la table... Ma table à champ 1 - champs 2- champs 3 - champs 4 et le tout en page sur formulaire en mode continu.
Je voudrais donc qu'en cliquant sur la cellule d'un enregistrement, il détecte dans quelle colonne je suis et qu'il me garde dans une variable le nom de la colonne soit champ 1 ou champ 2 ....
merci

**NoSmoking** · 04/03/2017, 13h47

Je ne sais pas si j'ai bien compris mais je te propose de gérer le click via délégation sur la <table>.

Dans le principe on met l'écouteur sur le <table> et si l'on clique sur une <td> la fonction traite l'événement.
Pour la récupération de la colonne il suffit de lire la propriété cellIndex de la <td> et pour la ligne la propriété rowIndex de la <tr> parent.

Concrètement regarde l'exemple et clique sur les cellules de la <table>.

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
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Récup. ligne et colonne au clic</title>
<meta name="Author" content="NoSmoking">
<style>
html, body {
  font:1em/1.5em Verdana, Arial, sans-serif;
}
h1, h2, h3 {
  color: #069;
}
#main {
  margin: 0 auto;
  max-width: 60em;
}
table {
  empty-cells:show;
  border-collapse:separate;
  border-spacing:1px;
  border:1px solid #888;
}
thead {
  background: #EEE;
}
thead tr {
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.2));
  text-shadow: 1px 1px white;
  border-radius: 2em;
}
td {
  font:0.9em/1.2em Verdana;
  min-width:10em;
  height:2em;
  min-height:2em;  
  cursor: pointer;
}
td,th {
  padding: 0.25em;
  border: 1px solid #888;
}
</style>
</head>
<body>
<div id="main">
  <h1>Récup. ligne et colonne au clic</h1>
  <table>
    <thead>
      <tr>
        <th>Nom</th>
        <th>Prénom</th>
        <th>Tél.</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Dupont</td>
        <td>Jean</td>
        <td>+(33)102030405</td>
      </tr>
      <tr>
        <td>Martin</td>
        <td>Pierre</td>
        <td>+(33)405060708</td>      
      </tr>  
      <tr>
        <td>Quiroule</td>
        <td>Pierre</td>
        <td>+(33)908070605</td>            
      </tr>
    </tbody>  
  </table>
  <p><b>Nota</b> : le numéro des lignes et des colonnes commence à 0.</p>
  <p>Clic sur :</p>
  <div id="console"></div>
</div>
<script>
// récup. des éléments
var oTable = document.querySelector('table');
var oDebug = document.querySelector('#console');
// initialisation des champs d'entête
var oTHs = oTable.querySelectorAll('TH');
var i, nb = oTHs.length;
var champs = [];
for (i = 0; i < nb; i += 1) {
  champs.push(oTHs[i].textContent);
}
// définition fonction au click
function handleClick(e) {
  var oClick = e.target;
  if ('TD' === oClick.tagName) {
    var oParent = oClick.parentNode;
    oDebug.innerHTML = '<ul><li>ligne : <b>'
        + oParent.rowIndex
        + '</b><li>colonne : <b>'
        + oClick.cellIndex
        + '</b><li>champ : <b>'
        + champs[oClick.cellIndex]
        + '</b></ul>';
  }
  else {
    oDebug.innerHTML = '';
  }
}
// affectation fonction
oTable.onclick = handleClick;
</script>
</body>
</html>

Récupérer le nom du champ selectionné

JavaScript

Vue hybride

Discussions similaires

Partager

Partager