IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Obtenir le rowIndex au clic dans un sous-tableau


Sujet :

JavaScript

  1. #1
    Membre régulier
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Mai 2008
    Messages
    231
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux

    Informations forums :
    Inscription : Mai 2008
    Messages : 231
    Points : 82
    Points
    82
    Par défaut Obtenir le rowIndex au clic dans un sous-tableau
    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.

  2. #2
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 427
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 427
    Points : 4 905
    Points
    4 905
    Par défaut
    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;

  3. #3
    Membre régulier
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Mai 2008
    Messages
    231
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux

    Informations forums :
    Inscription : Mai 2008
    Messages : 231
    Points : 82
    Points
    82
    Par défaut
    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.

  4. #4
    Membre régulier
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Mai 2008
    Messages
    231
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux

    Informations forums :
    Inscription : Mai 2008
    Messages : 231
    Points : 82
    Points
    82
    Par défaut
    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

  5. #5
    Membre averti Avatar de ASCIIDEFOND
    Homme Profil pro
    Autodidacte passionné
    Inscrit en
    Novembre 2002
    Messages
    235
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Landes (Aquitaine)

    Informations professionnelles :
    Activité : Autodidacte passionné

    Informations forums :
    Inscription : Novembre 2002
    Messages : 235
    Points : 439
    Points
    439
    Par défaut
    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 + ']')
                })
            })

  6. #6
    Membre régulier
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Mai 2008
    Messages
    231
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux

    Informations forums :
    Inscription : Mai 2008
    Messages : 231
    Points : 82
    Points
    82
    Par défaut
    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

    Nom : subtable.png
Affichages : 42
Taille : 18,3 Ko

    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

  7. #7
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 427
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 427
    Points : 4 905
    Points
    4 905
    Par défaut
    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)
    	});
    });

  8. #8
    Membre éclairé
    Homme Profil pro
    Webdesigner
    Inscrit en
    Juin 2014
    Messages
    419
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 64
    Localisation : France, Hautes Pyrénées (Midi Pyrénées)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Juin 2014
    Messages : 419
    Points : 837
    Points
    837
    Par défaut
    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.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Obtenir des coordonnées au clic dans un object silverlight
    Par lumfast dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 15/06/2016, 16h47
  2. [AC-2010] Macro "Ouvrir formulaire where" sur double-clic dans un sous-formulaire
    Par Beaver dans le forum Macros Access
    Réponses: 3
    Dernier message: 21/04/2015, 11h07
  3. Réponses: 2
    Dernier message: 08/10/2010, 11h54
  4. Moyenne dans un sous tableau
    Par Dizayeure dans le forum MATLAB
    Réponses: 1
    Dernier message: 12/11/2007, 22h52
  5. Réponses: 28
    Dernier message: 22/09/2005, 11h57

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo