Discussion :

[flipflip]

Bonjour à tous,

J'ai le tableau suivant

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
<table id="createProposition">
  <thead>
    <tr>
      <th>col 1</th>
      <th>col 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Action 1</td>
      <td>
        <table>
          <thead>
            <tr>
              <th>sub col 1</th>
              <th>sub col 2</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>sub td 1</td>
              <td>sub td 1</td>
              <td>sub td 1</td>
            </tr>
            <tr>
              <td>sub td 1</td>
              <td>sub td 1</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>Action 2</td>
      <td>
        <table>
          <thead>
            <tr>
              <th>sub col 1</th>
              <th>sub col 2</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>sub td 2</td>
              <td>sub td 2</td>
              <td>sub td 2</td>
            </tr>
            <tr>
              <td>sub td 2</td>
              <td>sub td 2</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>foot</td>
    </tr>
  </tfoot>
</table>

Lorsque je clic sur un élément du tableau (et surtout lorsque je clic sur un élément du sous-tableau) je souhaiterais obtenir le rowIndex correspondant à la ligne clic du tableau portant l'id "createProposition".

Pour le moment j'ai un listener sur l'id createProposition

Code javascript :

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

1
2
3
4
5
6
7
8
9
document.getElementById('createProposition').addEventListener('click', function(e) {
  let parent = e.target
  let tableclic = parent.closest('#createProposition')
  console.log('tableclic', tableclic)
 
  // c'est ici que ça commence à déconner :(
  let trpIndex = tableclic.rowIndex
  console.log('trpIndex', trpIndex)
}

Il me semble ne pas être bien loin de la solution mais pour le moment mes compétences en javascrip s'arrête ici

Est-ce que vous avez une idée ?

Merci d'avance.

[Toufik83]

Bonjour,

La propriété rowIndex est appliquée seulement aux <tr>, donc il faudrait toujours vérifier que l'élément cliqué est bien un tr sinon on revient à son parent.

Code :

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

1
2
let trpIndex = (e.target.nodeName.toLowerCase()=="tr"?e.target:e.target.closest('tr')).rowIndex;
  console.log('trpIndex', trpIndex);

C'est la même chose que

Code :

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

1
2
3
let trpIndex;
if(e.target.nodeName.toLowerCase()=="tr") trpIndex=e.target.rowIndex;
else trpIndex=e.target.closest('tr').rowIndex;

[flipflip]

Merci de ta proposition.

C'est presque ça mais lorsque je clic sur un des objets d'un des sous-tableaux j'obtiens l'indexRow du table dont appartient l'objet et non le rowIndex du tableau principal (#createProposition) dans lequel se trouve le sous tableau.

[flipflip]

Bingo !

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
  let clic = e.target
  console.log('clic', clic)
 
  let table = clic.closest('table')
  console.log('table', table.id)
 
  if(table.id !== 'createProposition') {
      let sub = table.closest('tr')
      console.log('sub', sub.rowIndex)
  } else {      
      let top = clic.closest('tr')
      console.log('createProposition', top.rowIndex)
  }

En version moins détaillé

Code javascript :

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

1
2
3
4
5
6
7
8
let table = e.target.closest('table')
let rowIndex
if(table.id !== 'createProposition') {
    rowIndex = table.closest('tr').rowIndex
} else {    
    rowIndex = e.target.closest('tr').rowIndex
}
console.log('rowIndex', rowIndex)

Maintenant reste à voir si il y a moyen de rendre ça plus élégant

[ASCIIDEFOND]

Salut flipflip,

Code javascript :

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

1
2
3
4
5
6
        document.querySelectorAll("tr").forEach((cellule, index) => { //Parent balise <tr>
            cellule.addEventListener('click', (e) => {
                e.stopPropagation()
                console.log('[Ligne: ' + cellule.rowIndex + '] [Colonne:' + e.target.cellIndex + '] [Valeur de la cellule: ' + e.target.textContent + ']')
            })
        })

[flipflip]

Merci ASCIIDEFOND, tout comme la 1ere proposition j'obtiens l'indexrow du tableau correspondant au clic et non de celui supérieur.

Comme l'idée n'est pas forcément clair j'ai fais un screen



Par exemple si je clic sur le champ "Référence client" du sous tableau 1, avec ton exemple je vais obtenir 2 comme indexRow car cela correspond à l'indexRow du sous tableau 1 alors que moi j'attends 1 comme indexRow du tableau principal.

Pareil si je clic sur le champ référence du sous tableau 2, avec ton code je vais obtenir 1 car c'est l'indexRow du sous tableau 2 alors que moi j'attends 2 car c'est l'indexRow du tableau principal.

J'espère que c'est plus clair maintenant et que cela puisse servir à d'autres

[Toufik83]

Bonjour,

Ok, je croyais que tu voulais récupérer le rowIndex des deux tableaux, sinon essaies ce code :

Code :

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

1
2
3
4
5
6
7
document.querySelectorAll('#createProposition > tbody > tr')
.forEach(tr=>{
	tr.addEventListener('click', function(e) {
            let trpIndex = this.rowIndex;
            console.log('trpIndex', trpIndex)
	});
});

[domi65]

Bonjour.
Utiliser closest est une très bonne idée...
... qu'il faut exploiter à fond !
Ci-dessous j'affiche le rowIndex du tableau parent lorsque je clique sur une cellule :

Code javascript :

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

1
2
3
4
5
6
7
//  on ne sélectionne que les td contenus dans des tr, plus besoin de stopPropagation
for(let e of document.querySelectorAll('td tr')) {
     e.onclick = function() {
	thistable = this.closest('table')
	alert(thistable.closest('tr').rowIndex)
    }
}

Cela dit, ta structure HTML n'est plus très valable aujourd'hui. Un pseudo tableau en "flex" donnerait une structure plus souple et plus facile à travailler en JS.
Cordialement.