Discussion :

[pitchounvivi]

Bonjour

j'ai un tableau dont les lignes ont été remplis par une boucle php/twig. Jusque là tout va bien.
Les cellules que je souhaite rendre cliquable possède la classe selectable.

Je voudrais que lorsqu'on clique sur une de ces cellules, on récupère des infos qui appartiennent à la ligne mais aussi le nom de la colonne auquelle appartient la cellule.

j'arrive à récupérer les champs d'une ligne (mais toute la ligne est cliquable) et je n'arrive pas à récupérer le nom du champs.

Code JS :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$(document).ready(function () {
            $("tr").click(function () {
                //on récupère la ligne sélectionnée
                var ligne = $(this);
 
 
 
                    selectLine(ligne);
 
 
            })
        })

Toutes les cellules d'une colonne portent la même classe.


J'espère que j'ai été clair.

[pitchounvivi]

J'ai une partie de ma solution, mais je n'arrive toujours pas à récupérer le nom de la colonne du champs cliqué

La j'ai bien les valeurs de la ligne qui m'intéressent, mais pas le nom de la cellule cliquée.

Code JS :

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

1
2
3
4
5
6
7
8
9
 
$("tr").click(function () {
                //L'index permet de récupérer le contenu de la cellule de la ligne
                    var anneeTest = $(this).find("td").eq(0).html(); 
                    var moisTest = $(this).find("td").eq(1).html();
 
                    selectLine(anneeTest, moisTest);
 
            })

[SpaceFrog]

Essaye avec un truc du genre

Code :

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

1
2
3
4
5
6
7
8
9
 
$("tr").click(function (event ) {
                //L'index permet de récupérer le contenu de la cellule de la ligne
                    var anneeTest = $(this).find("td").eq(0).html(); 
                    var moisTest = $(this).find("td").eq(1).html();
                    var clickedCell=$(event.target);
                    console.log(clickedCell.text();
 
                    selectLine(anneeTest, moisTest);

[pitchounvivi]

Je suis intrigué par ce qu'il me dit si je fais

Code JS :

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
 
$(document).ready(function () {
            $("tr").click(function (event) {
                //L'index permet de récupérer le contenu de la cellule de la ligne
                    var annee = $(this).find("td").eq(0).html();
                    var mois = $(this).find("td").eq(1).html();
 
 
                    var cell = $(event.target);
                    var cellSelect = cell.getAttribute('selectable');
                    console.log(cellSelect);
 
 
//                    if(cell.classList.contains("selectable")){
                        selectLine(annee, mois);
//                    }
 
 
            })
        })

Pour cell.getAttribute : il me dit que ce n'est pas une fonction

et si je test le if ... il me dit que cell est indefini
mais j'ai bien var cell = $(event.target)

Si je comprends bien il ne sais pas qu'elle est la cellule cliquée donc il n'est pas capable de me donner son attribut.

[pitchounvivi]

Par contre avec

Code JS :

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

1
2
3
4
5
 
$("td").click(function () {
                        var cell = $(this).attr('class');
                        console.log(cell);
                    })

Il arrive bien à me trouver les classes de ma cellule MAIS que SI je fais 2 ou 3 cliques la première fois ... mais après il fonctionne dès le premier clique.

C'est comme s'il avait un retard à l'allumage.

[pitchounvivi]

Bon ça y est, presque, j'ai bien mes classes de la cellule cliquée et seul les cellules avec la classe selectable sont cliquables.

Code JS :

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
 
$(document).ready(function () {
            $("tr").click(function (event) {
                //L'index permet de récupérer le contenu de la cellule de la ligne
                var annee = $(this).find("td").eq(0).html();
                var mois = $(this).find("td").eq(1).html();
 
 
                $("td").click(function () {
                    var cell = $(this).attr('class');
                    console.log(cell); //retourne bien les classes de ma cellule sélectionnée
 
                    if($("td").hasClass("selectable")){
                        console.log("clique ok");
                    }
                })
            })
        })

mais il me reste mon retard à l'allumage ...
et à envoyer le nom de la classe de ma cellule

[psychadelic]

c'est pourtant si simple, en simple javascript...

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
<!DOCTYPE html>
<html lang="fr">
head>
  <meta charset="UTF-8">
  <title>Tableau JS</title>
  <style>
     td { border:1px solid grey; width: 2em; text-align: center; cursor: pointer; }
     td:hover { background-color: cadetblue; }  
  </style>
</head>
<body>
  <table id="maTable">
    <tbody>
      <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> </tr>
      <tr> <td>e</td> <td>f</td> <td>g</td> <td>h</td> </tr>
      <tr> <td>i</td> <td>j</td> <td>k</td> <td>l</td> </tr>
      <tr> <td>m</td> <td>n</td> <td>o</td> <td>p</td> </tr>
    </tbody>
  </table>
  <p id="info">cliquer sur une case...</p>
<script>
  maTable.onclick=e=>
    {
    if (!e.target.matches('td')) return
 
    let eTD = e.target
      , eTR = eTD.parentNode
      ;
    info.textContent = `Ligne= ${eTR.rowIndex}, colonne= ${eTD.cellIndex}, contenu= ${eTD.textContent}`
    }
</script>
</body>
</html>