Obtenir le rowIndex au clic dans un sous-tableau

Version imprimable

Bonjour à tous,

J'ai le tableau suivant

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

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.

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:

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:

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

17/04/2024, 14h34
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.

Bingo !

Code:

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:

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

Salut flipflip,

Code:

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 + ']')
            })
        })

17/04/2024, 15h30
flipflip

1 pièce(s) jointe(s)

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

Pièce jointe 653477

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

Bonjour,

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

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

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:

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.