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