Discussion :

[ridha11111]

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

[Doksuri]

qu'entends-tu par "ligne selectionnee" ?

a default : voici une version "ligne cliquee"

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

[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).

[javatwister]

salut!

ou encore:

Code javascript :

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

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

[psychadelic]

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 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="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 JAVASCRIPT :

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

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

[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...

[Doksuri]

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

[javatwister]

Et puisqu'on en est à la rigolade:

Code javascript :

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

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

[NoSmoking]

Bonjour,

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

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

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.

Code :

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

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 :

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

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