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
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<table id='table'> <tr> <td></td> <td></td> </tr> etc.... </table>
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
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')) ; } } })
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
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 $("tr").click(function(){ var evt = this.id )}
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
Partager