Ajout de ligne cliquable avec JS

**younesssoleil** · 03/10/2016, 12h28

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 :

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

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:

Nom : Sans titre.png
Affichages : 1048
Taille : 6,3 Ko

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

**danielhagnoul** · 04/10/2016, 10h39

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 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
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>

**younesssoleil** · 04/10/2016, 12h24

Merci pour ton retour;
mais je pense que la focntion click ne fonctionne pas

**younesssoleil** · 04/10/2016, 12h38

Désolé... ou peut être, peux tu m'indiquer la fonction qui se déclenche lors d'un click dans une cellule.
Merci

**younesssoleil** · 04/10/2016, 13h43

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

**younesssoleil** · 04/10/2016, 21h45

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 :

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
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;	
 
}
 
}
 
/* <!-- fonction drag & drop des actions créeer--> */
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);

**younesssoleil** · 05/10/2016, 14h42

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

Merci

Ajout de ligne cliquable avec JS

JavaScript

Discussions similaires

Partager

Partager