Discussion :

[nicdodo]

Bonjour, actuellement en formation je me suis lancé dans un petit projet en javascript mais je butte sur un problème technique que je n'arrive pas à résoudre

J'ai un tableau avec 6 ligne(en tête compris) dans mon HTML de base

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<table id='table'>
      <tr>
            <td></td>
            <td></td>
       </tr>
 
etc....
 
</table>

J'ai fait une fonction js qui ajoute des lignes à mon tableau

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
 
var tableauJS = []
var table = document.getElementById("tabl") ;
 
ajouter.addEventListener("click", function(){
 
var i = 0 ;
 
    while (tableauJS[i] != undefined){
        i++ ;
    }
 
    //On determine la taille du tableau JS pour savoir si on doit créer une nouvelle ligne dans le tableau HTML
    //Si i > 4 on crée une nouvelle ligne avec sa couleur en fonction de i paire ou impaire
 
    if (i > 4){
        var newLine = document.createElement('tr')
        table.appendChild(newLine) ;
        newLine.id = "nb_"+ (i+1)
        newLine.setAttribute("class", "")
        newLine.style.height = "30px" ;
 
        i%2 == 0 ? newLine.style.background = "#3498db" : newLine.style.background = "#bdc3c7" ;
 
        for (var k = 0 ; k < 9 ; k++){
            newLine.appendChild(document.createElement('td')) ;
        }    
    }
})

Le but du jeu est de récupérer les éléments des lignes du tableau HTML au click, pour cela j'ai fait en Jquery (je voulais tout faire en natif mais je n'y suis pas arrivé ;( )

Code :

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

1
2
3
4
5
 
 
$("tr").click(function(){
    var evt = this.id
)}

Mon problème est le suivant, lorsque je clique sur les lignes de mon tableau crée à partir du code html ça marche très bien, mais des qu'on rentre dans la partie dynamique ça ne marque plus. En gros si je clique sur la ligne 5 la console va me mettre id=nb_5 mais si je click sur la ligne 6 je n'ai rien qui se passe

Je comprends que lorsque je lui dis $("tr").click il va me rechercher les tr chargés au début du chargement, du coup je ne sais pas comment faire, j'ai un bug technique . Merci d'avance pour votre aide j'ai passé la journée dessus à chercher pleins de solutions que ça soit avec un rajout de l'attribut onclick sur chaque tr dans le html et l'appel à une fonction, une boucle sur mon tableau avant le addEventListener, en gros toutes les choses qui me sont passés par la tête ou que j'ai pu croiser sur le net. C'est dont vraiment en derniers recours que je viens vous demander un peu de votre temps. Serait il possible d'avoir la solution en natif sans jquery s'il vous plait? Cordialement

[badaze]

Va voir là https://www.developpez.net/forums/d1...-tableau-html/

[Kennel sébastien]

Bonjour nicdodo,

Si l'événement se déclenche sur les lignes créés en HTML et non sur ceux que tu as créés dynamiquement en JavaScript c'est parce que tu n'as pas créé l'événement sur ceux que tu as créés dynamiquement…

[danielhagnoul]

Pour jQuery, voir : Différences entre on() avec 1 ou 2 sélecteurs

[nicdodo]

Merci à tous, vous m'avez super bien orienté. Je préfère utiliser le javascript natif mais dans certain cas le jquery est vraiment vraiment super agréable je dois reconnaître. Faut que je m'améliore encore en natif et puis je me mettrais au Jquery et Angular4

Du coup j'ai fait comme vous m'avez dit, je suis allez voir la doc de l'event .on et effectivement j'écoutais pas le bon élément. Le .on avec 2 sélecteur c'est vraiment top

Code :

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

1
2
3
4
5
 
$("table").on("click" , "tr" ,function(){
    var evt = this.id
    console.log(evt)
})

Badaze par contre j'ai essayé de faire en natif en essayant de remonter le DOM en m'inspirant de ton lien mais je n'y suis pas arrivé :/. J'ai pas trop cherché non plus faut dire j'en avais marre et la solution en Jquery du coup je suis passé à autre chose. Je vais me remettre à chercher la solution en natif mais si quelqu'un pouvait m'aiguiller en pseudo code ça serait sympa. Je ne mets pas résolu en attendant le natif pour garder la discussion ouverte mais je reviendrai dans la soirée ou demain pour cliquer sur le résolu. Merci à tous

[badaze]

@nicodo.

Essaie ça.

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
<!DOCTYPE html>
<html>
<head><script>
function toto(evt) {
 if (evt.target.tagName == 'TD') {
  var sourceTable = evt.target.parentElement.parentElement;  
  var sourceRow   = evt.target.parentElement;
  clone(sourceTable, sourceRow,true);
 }
}
function clone(sourceTable, sourceRow,copyAll) {
 target       = sourceRow.cloneNode(copyAll);
 sourceTable.appendChild(target);
}
function ajout() {
 var table       = document.getElementById('tab1');  
 var sourceRow   = table.children[0].children[0];
 var numLigne    = table.rows.length;
 var tr          = table.insertRow(numLigne); 
 tr.innerHTML    = sourceRow.innerHTML;
}
</script>
</head>
<body>
<table id="tab1" onclick="toto(event)">
 <tr><td><input type="text" value=""/></td><td>Clique ici pour cloner</td></tr>
</table>
<hr/>
<input type="button" value="Ajout Ligne vide" onclick="ajout()"/>
</body>
</html>

[nicdodo]

Ok ok merci badaze, en me penchant un peu plus sérieusement sur ce que tu avais fait je suis tombé sur des tutos de gestion d’événement et de propagation. C'est un concept que je n'avais pas forcement bien intégré jusqu'à présent mais ce petit exercice m'a fait comprendre, nottament le paramétré event de la fonction. Ça parait pourtant tellement logique une fois fait

Du coup mon code jquery

Code :

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

1
2
3
4
5
 
$("table").on("click" , "tr" ,function(){
      var evt = this.id
      console.log(evt)
}

se traduit en javascript par

Code :

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

1
2
3
4
5
6
 
table.addEventListener("click", function(e){
      var initElem = e.target.parentElement
      var evt = initElem.id
      console.log(evt)
}

Merci encore pour le coup de main, ce concept de propagation et d'event n'était pas très clair et il le devient de plus en plus

[danielhagnoul]

Je n'aime pas être le rabat-joie de service, mais attention au fonctionnement réel de vos codes, tant en jQuery (sucre syntaxique JS) qu'en JS.

Votre version jQuery accepte tout clic sur TR, ce qui inclut les TR du thead, du tbody et du tfoot (une table bien formée inclut au minimum un thead et un tbody).

Votre version JS est encore plus permissive, elle accepte un clic sur n'importe quel élément de la table.

Corrections :

Code :

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

1
2
3
4
$( "table > tbody" ).on( "click" , "td" ,function( ev ){
    // debug
    console.log( ev.target, ev.currentTarget );
});

Code :

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

1
2
3
4
5
document.querySelector( "#table > tbody" ).addEventListener( "click", ev => {  
  if ( ev.target.nodeName === "TD" ){
    console.log( "td : ", ev.target.textContent, "tr : ", ev.target.parentElement.id );
  }
)};