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>

[pitchounvivi]

Alors je ne peux pas utiliser de JS récent. L'appli est ancienne et elle n'aime pas les => dans je JS.
C'est pourquoi j'utilise le vieux jquery de l'appli.

j'ai essayé de traduire ce qui donne ça

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
 
$("table").click(function (event) {
                if (!event.target.matches('td')) {
 
                    var eTD = e.target;
                    var eTR = eTD.parentNode;
 
//                info.textContent = `Ligne= ${eTR.rowIndex}, colonne= ${eTD.cellIndex}, contenu= ${eTD.textContent};`
 
                    var ligne = eTR.rowIndex;
                    var colonne = eTD.cellIndex;
 
                    console.log("ligne : " + ligne);
                    console.log("colonne : " + colonne);
 
 
                }
 
            })

Et je n'ai pas la prétention d'avoir écris correctement, mais écris comme ça, ça ne marche pas

[psychadelic]

c'est étrange, normalement quand un truc marche pas sur une machine , on a un message d'erreur dans la console du navigateur....

[pitchounvivi]

Ben oui je sais qu'il devrait dire quelque chose mais il ne me dit rien.

J'ai aussi modifié le event, mais ça ne viens pas de là

d'ailleurs je viens de réaliser, je n'ai pas de id sur mes cellules, seulement des classes ...
car le tableau est construit dans une boucle PHP/TWIG.

Désolé de ne pas avoir tiqué tout de suite mais ça fait plusieurs jours que je suis dessus

[psychadelic]

Code :

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

1
2
3
4
5
6
7
8
9
10
$("table tbody").on("click","td", (function ()
  {
  var eTD     = this
    , eTR     = eTD.parentNode
    , ligne   = eTR.rowIndex
    , colonne = eTD.cellIndex
    ;
  console.log( "ligne : " + ligne)  ;
  console.log( "colonne : " + colonne );
  }))

[pitchounvivi]

Je te remercie, parce que ça en l'état ça marche.
J'ai bien le numéro de ma ligne et celui de la cellule (en numérotation tableau donc depuis 0).

Ce n'est pas tout à fait ce que je cherchais mais cela me donne une idée pour m'en sortir.

En plus ça a réglé mon problème de double clique.

Encore merci à toi, j'essaie de régler mon problème de variable et je passe en résolu.

Encore merci.

[pitchounvivi]

pourquoi il me dit que eTD.hasClass n'est pas une fonction ?

Code JS :

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

1
2
3
4
5
 
if(eTD.hasClass("selectable")){
                    console.log("clique Page ok");
                    selectLine();
                }

[SpaceFrog]

elle est interprétée ou et quand cette ligne de code ?

[Toufik83]

Salut,

Parce que eTD n'est pas un objet jQuery, essaies de mettre :

Code :

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

$(eTD).hasClass

[SpaceFrog]

ou

Code :

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

 var eTD     =$(this)

[pitchounvivi]

Oui oups, c'est ça ...

JE tiens ABSOLUMENT à vous remercier tous les deux pour votre patience.

Au cas où je mets le code pour avoir certaines cellules cliquables et récupérer certaines infos de la ligne et le nom de la cellule (en fait j'utilise juste le numéro de la colonne et je lui réattribue un nom == celui qui sera demandé dans ma requête sql).
A mettre dans une balise script

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
21
22
 
        $(document).ready(function () {
            $("table tbody").on("click","td", (function ()
            {
 
                var eTD     = this,
                    eTR     = eTD.parentNode,
                    ligne   = eTR.rowIndex,
                    colonne = eTD.cellIndex,
                    classCellule = eTD.className;
 
                console.log( "ligne : " + ligne)  ;
                console.log( "colonne : " + colonne );
                console.log( "nomCellule : " + classCellule );
 
                if($(eTD).hasClass("selectable")){
                    console.log("clique Page ok");
                    selectLine(ligne,colonne);
                }
 
            }))
        })

C'est bête mais il faut penser à mettre aussi cette balise pour que cela fonctionne

Code HTML :

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

1
2
 
<script type="text/javascript" src="{{ base_url() }}/js/tableGestion.js"></script>

et la fonction js dans le fichier tableGestion

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
21
22
23
24
25
26
27
28
29
30
31
 
function selectLine(ligne,colonne){
    // on n'a récupéré que l'année et le mois
    var annee = $("tr").eq(ligne).find("td").eq(0).html();
    var mois = $("tr").eq(ligne).find("td").eq(1).html();
 
 
    // on n'a récupéré que l'année et le mois
    console.log(annee);
    console.log(mois);
    console.log("clique Fonction ok");
 
    switch (colonne){
        case 2:
            var acronyme = "tous";
            break;
        case 3:
            var acronyme = "Nb_ADR0";
            break;
        case 4:
            var acronyme = "Nb_ADRPC";
            break;
        case 5:
            var acronyme = "Nb_ADRVOIE";
            break;
        case 6:
            var acronyme = "Nb_ADRCOMP";
            break;
    }
 
    console.log(acronyme);

Encore merci ... je pense sincèrement que j'y serai encore sans vous.

[NoSmoking]

Bonjour,
si je peux me permettre, visiblement oui, lorsque l'on utilise jQuery on code jQuery on mixe le moins possible c'est une question de cohérence dans le code, sa lecture donc sa maintenance.

Code :

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

1
2
3
4
5
6
7
8
$("#id-table td").on("click", function () {
  const $parent = $(this).parent();
  const tabText = [];
  $parent.children(".selectable").each(function () {
    tabText.push($(this).text());
  });
  console.log(tabText);
});

sous réserve des noms de classe !

[pitchounvivi]

Ok, je vais changer ça.

Mais au moins, j'ai une base qui fonctionne donc je sais un peu plus où aller.

Je ne maîtrise pas jquery et javascript, et l'appli utilise les 2, alors ça ne facilite pas ma compréhension.

Encore merci pour la remarque

[NoSmoking]

Je rajoutes que jQuery regorge de méthodes utiles comme par exemple : La trop méconnue méthode index()

Code :

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

1
2
3
console.log("(1)", $parent.children("td").index($(this)));
// encore plus direct
console.log("(2)", $(this).index());