Récupérer dynamiquement le numéro de la ligne sélectionnée d'une table HTML

Version imprimable

01/04/2020, 17h11
ridha11111

Récupérer dynamiquement le numéro de la ligne sélectionnée d'une table HTML

Bonjour;
je suis debutant en developpement Web, je veux un petite exemple comment je peut récupérer dynamiquement le numéro de ligne selectionnee en table HTML.

Merci.

Ridha

qu'entends-tu par "ligne selectionnee" ?

a default : voici une version "ligne cliquee"

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
<table id="data">
    <tr>
        <td>l1c1</td>
        <td>l1c2</td>
        <td>l1c3</td>
    </tr>
    <tr>
        <td>l2c1</td>
        <td>l2c2</td>
        <td>l2c3</td>
    </tr>
    <tr>
        <td>l3c1</td>
        <td>l3c2</td>
        <td>l3c3</td>
    </tr>
</table>
<br />
<span id="display"></span>
    <script>
        document.querySelectorAll("#data tr").forEach( (row, i) => {
            row.addEventListener('click', () => { showFocusedRow((i+1)); });
        });
 
        function showFocusedRow(i) {
            document.getElementById('display').textContent = `ligne [${i}]`;
        }
    </script>

01/04/2020, 18h52
Beginner.

Salut,

Doksuri a déjà répondu en donnant un exemple mais je me disais que cela pourrait faire un bon exercice d’essayer de faire la même chose avec un seul gestionnaire d'évènement (délégation).
02/04/2020, 17h56
javatwister

salut!

ou encore:

Code:

document.querySelectorAll("#data tr").forEach(function(row,i){row.title=i+1});

Citation:

Envoyé par Beginner.

Doksuri a déjà répondu en donnant un exemple mais je me disais que cela pourrait faire un bon exercice d’essayer de faire la même chose avec un seul gestionnaire d'évènement (délégation).

voila:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<table id="ma-table">
  <tr>
      <td>l1c1</td> <td>l1c2</td>  <td>l1c3</td>
  </tr>
  <tr>
      <td>l2c1</td>  <td>l2c2</td>  <td>l2c3</td>
  </tr>
  <tr>
      <td>l3c1</td>  <td>l3c2</td>  <td>l3c3</td>
  </tr>
</table>
 
<p id="info-click">...</p>

Code:

1
2
3
4
5
6
7
8
9
10
const maTable   = document.getElementById('ma-table')
  ,   infoClick = document.getElementById('info-click')
  ;
maTable.onclick=e=>
  {
  if (!e.target.matches('td')) return
  infoClick.textContent = ` clic sur ligne : ${e.target.parentNode.rowIndex}`
                        + `, colonne : ${e.target.cellIndex}`
                        + ` (contenu = ${e.target.textContent})`
  }

02/04/2020, 20h26
Beginner.

Oui bien joué !
Tu as même ajouté les colonnes...
Et l'usage de rowIndex et de cellIndex est avantageux puisque l'on utilise des propriétés déjà existantes...
03/04/2020, 09h02
Doksuri

Citation:

Envoyé par Beginner.

Et l'usage de rowIndex et de cellIndex est avantageux puisque l'on utilise des propriétés déjà existantes...

c'est pas faux, j'avoues n'avoir pas reflechit plus de 2 sec a sont probleme :aie:

Et puisqu'on en est à la rigolade:

Code:

1
2
document.querySelectorAll("#data td").forEach(
	c => c.title=`${c.parentNode.rowIndex+1} - ${c.cellIndex+1}`);

Bonjour,

Citation:

Envoyé par Beginner.

je me disais que cela pourrait faire un bon exercice d’essayer de faire la même chose avec un seul gestionnaire d'évènement (délégation).

attention à ne pas perdre de vue que dans ce cas il ne faut pas qu'il y est d'élément « parasite » tel un <span>, <button> dans l'élément <td> sinon rien ne fonctionnera.
Pour s'en convaincre il suffit de modifier le HTML comme suit par exemple, qui est, somme toute, un cas classique :
Code:

1 2 3 4 5 <tr> <td>l1c1</td> <td>l1c2</td> <td><button>Supprimer</button></td> </tr>
Pour l'affectation il sera préférable de mettre l'écoute du click sur chaque tr mais pour limiter l'usage de la mémoire en utilisant une fonction dédiée et non une fonction anonyme qui serait dupliquée pour chaque tr.

On peut néanmoins utiliser la délégation mais dans ce cas il faut prévoir une fonction de propagation de l'événement.
Citation:
Envoyé par psychadelic
Code:

1 2 3 infoClick.textContent = ` clic sur ligne : ${e.target.parentNode.rowIndex}` + `, colonne : ${e.target.cellIndex}` + ` (contenu = ${e.target.textContent})`
Pourquoi ne pas utiliser le potentiel des « Template strings » concernant l’utilisation des chaînes multi-lignes
Code:

1 2 3 4 5 infoClick.textContent = ` clic sur ligne : ${e.target.parentNode.rowIndex}, colonne : ${e.target.cellIndex}, (contenu = ${e.target.textContent}) `;