Ajout de ligne cliquable avec JS

Version imprimable

1 pièce(s) jointe(s)

Bonjour;
j'ai initialement un tableau d'1 ligne et 1 colonne ;les en-tête.
je rajoute des lignes via un bouton avec le code ci-dessous:
Code:

1 2 3 4 5 6 7 8 9 10 var elmt= document.getElementById('tableau'); //je récupere l'ID du tableau dans elmt var tr = document.createElement('tr');// création de la ligne elmt.appendChild(tr); var td = document.createElement('td'); // création d'une 1 ere cellule tr.appendChild(td); var tdText = document.createTextNode(oElem.value); // oElem.valaue est le texte à rajouter dans la cellule 1 td.appendChild(tdText); var td2 = document.createElement('td'); // création d'une 2eme cellule avec 0 comme valeur à l'intérieur tr.appendChild(td2); td2.innerHTML=0;
exemple:
Pièce jointe 221755

je souhaite savoir comment rendre ces cellules rajoutées cliquable avec une fonction qui a pour réf l'indice de la ligne par exemple.
exemple: quand je clique sur Action1 j’exécute une fonction f(i) i=1 pour Action1 et =2 pour Action2
Merci et j’espère que j'ai été claire

Ayant été dérangé par un visiteur imprévu hier ~~vers midi~~ soir, je n'ai pas pu poster ma solution. La voici (commentaires dans le code JS) :

Code:

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>test</title>
  <style>
    th, td {
      padding: 0.3rem;
      width: 10rem;
      height: 1.4rem;
    }
    button {
      margin-bottom: 1.4rem;
    }
  </style>
  <script>
    'use strict';
          
    document.addEventListener( 'DOMContentLoaded', function( ev ){
      
    });
    
    window.addEventListener( 'load', function( ev ){
      
      let index = 2; // il y a déjà 2 TR dans le tableau
      
      // gestion des événements click sur TD
      function cellClickEventHandler( ev ){
 
        // n est la valeur de l'attribut data-index du TR parent
        let n = ev.target.parentNode.dataset.index;
        
        // debug, console, touche F12
        console.log( ev.target.textContent, "index = ", n );
      }
      
      // gestionnaire d'événement click pour les TD existants
      for( let elem of Array.from( document.querySelectorAll( "td", "#tableau > tbody" ) ) ){
        elem.addEventListener( "click", cellClickEventHandler );
      }
      
      // gestionnaire d'événement click sur le bouton "Ajoute une ligne au tableau"
      document.querySelector( "#btnAjout" ).addEventListener( "click", function( ev ){
        let
          elemTbody = document.querySelector( "#tableau > tbody" ),
          elemTr = document.createElement( 'tr' ),
          elemTd = document.createElement('td'),
          tempTd = elemTd.cloneNode( true );  // premier TD clone de elemTd
          
        elemTr.dataset.index = ++index; // data-index = ( index = index + 1 )
        
        // ajout d'un gestionnaire d'événement click sur le premier TD
        tempTd.addEventListener( "click", cellClickEventHandler );
        
        tempTd.textContent = "Bonjour";
        elemTr.appendChild( tempTd ); // ajout premier TD
        
        tempTd = elemTd.cloneNode( true ); // second TD clone de elemTd
        
        // ajout d'un gestionnaire d'événement click sur le second TD
        tempTd.addEventListener( "click", cellClickEventHandler );
        
        tempTd.textContent = "0";
        
        elemTr.appendChild( tempTd ); // ajout second TD
        
        elemTbody.appendChild( elemTr ); // ajout TR au TBODY
      });
      
    });
  </script>
</head>
<body>
  <main>
    <button id="btnAjout">Ajoute une ligne au tableau</button>
    <table id="tableau">
      <thead>
        <tr>
          <th>Nom_Actions</th>
          <th>Nb_Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr data-index="1">
          <td>Action 1</td>
          <td>0</td>
        </tr>
        <tr data-index="2">
          <td>Action 2</td>
          <td>0</td>
        </tr>
      </tbody>
    </table>
  </main>
</body>
</html>

04/10/2016, 12h24
younesssoleil

Merci pour ton retour;
mais je pense que la focntion click ne fonctionne pas
04/10/2016, 12h38
younesssoleil

Désolé... ou peut être, peux tu m'indiquer la fonction qui se déclenche lors d'un click dans une cellule.
Merci
04/10/2016, 13h43
younesssoleil

C'est bon j'ai trouvé.. Merci
en fait, est ce possible de rendre visible le texte dans les cellules comme des liens hypertext
Merci

Merci Danielhagnoul pour ton retour;
En fait je n'arrive pas à utiliser ton code par rapport à mon besoin: En fait

j'ai un bouton qui me permet de créer des boutons déplaçable avec la souris via la fonction: valider_nouvelleaction (voir code ci-dessous) et en même temps
de créer une nouvelle ligne dans mon tableau (qui a initialement comme header Nom_action et Nb_action). dans cette nouvelle ligne crée; la 1 ere colonne
= une zone de texte(newaction.value) et la 2ieme un compteur que j'incrémente à chaque click sur le bouton concerné
Exemple: l'utilisateur rentre la valeur "Action1" dans newaction et valide avec le bouton ( id= valider_nouvelleaction)...alors le programme crée un bouton
avec comme texte : Action1 et une nouvelle ligne dans le tableau :Action1: 0.
dés que je Click sur le bouton Action1 j'incrément la 2eme colonne de la ligne correspondante à Action1 de +1.

J'utilise le code ci-dessous qui marche bien pour la création de boutons déplaçable, pour remplir le tableau et incrémenter la 2 colonne ce qui me manque
c'est comment utiliser ton code pour rendre les lignes cliquable en exécutant une fonction qui utilise le nom de l'action et l'indice de la ligne comme réf.
Merci de ton aide.
PI: j'ai essayé toute l’après midi pour le faire sans succès.
ce-dessous le bout de code JS que j'utilise
Code:

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 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 // initialistion document.querySelector('#valider_nouvelleaction').onclick = function () { // valider_nouvelleaction= id du bouton qui permet de créer un bouton déplacable // création élément var oElem = document.createElement('button'); oElem.className = 'elem-new'; oElem.setAttribute('draggable', 'true'); // gestion du DnD oElem.ondragstart = handleDragStart; oElem.ondragend = handleDragEnd; // ajout d'un texte oElem.textContent = newaction.value; // newaction= text à mettre dans les boutons crées oElem.id= 'id' + (document.querySelectorAll('.elem-new').length + 1); //id des =boutons crées oElem.value = newaction.value; // ajout élément document.querySelector('body').appendChild(oElem); //création d'une nouvelle ligne dans mon tableau avec nom de la 1 ere colonne = oElem.value ( l'element cliké) et 0 de la 2 eme var elmt= document.getElementById('tableau'); var tr = document.createElement('tr'); elmt.appendChild(tr); var td = document.createElement('td'); tr.appendChild(td); var tdText = document.createTextNode(oElem.value); td.appendChild(tdText); var td2 = document.createElement('td'); tr.appendChild(td2); td2.innerHTML=0; oElem.onclick = function(){ // focntion exécutée lors du click sur un bouton var arrayLignes = document.getElementById('tableau').rows; //l'array est stocké dans une variable var nb_lignes = arrayLignes.length; for (var i=1; i<nb_lignes; i++){ if (document.getElementById('tableau').rows[i].cells[0].innerHTML==oElem.value) { document.getElementById('tableau').rows[i].cells[1].innerHTML =parseInt(document.getElementById('tableau').rows[i].cells[1].innerHTML,10) +1; } } /*  */ var handleDragStart = function (e) { var oElem = e.target; // position initiale de l'élément oElem.originalX = e.screenX; oElem.originalY = e.screenY; oElem.id = 'move_encours'; e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('Text', oElem.id); }; var handleDragEnd = function (e) { var oElem = e.target; // on replace à l'écran oElem.style.top = oElem.offsetTop + (e.screenY - oElem.originalY) + 'px'; oElem.style.left = oElem.offsetLeft + (e.screenX - oElem.originalX) + 'px'; oElem.id = ''; // place l'élément au premier plan oElem.parentNode.appendChild(oElem); }; // autorise le déplacement sur la totalité du document document.addEventListener('dragover', function (e) { e.preventDefault(); }, false);

05/10/2016, 14h42
younesssoleil

J'ai trouvé la solution
J'ai rajouté la fonction function cellClickEventHandler( ev ) à la création de les lignes

Merci